7

ヘッダーに3つの円があり、stellar.jsを介してスクロールすると異なる速度で落ちると想定されています。残念ながら、彼らは動かない。それらはすべて位置属性（絶対）を持っています。data-stellar-ratioさらに、適切なタグにを適用しました。なぜstellar.jsが機能しないのですか？さらに、jQueryをテストして、パイロットエラーではないかどうかを確認するにはどうすればよいでしょうか。

HTML

<div id="companyInfo" >
    <div class="circlefront" data-stellar-ratio="1.2"></div>
    <div class="circlemiddle" data-stellar-ratio="1.8"></div>
    <div class="circlerear" data-stellar-ratio="3"></div>
    <div class="infoWrapper">
      <h1>Towing, you can't do it without a truck, i have a truck</h1>
      <p>Id abunum ta inte publicae adhui senterem praties tantiena quitas vis, factum destus. Loca vehebus; et? Ti. Upionem, sil tala morbit ina, nique confendum tati et acepsen ihilin sula audactorips, fatur ia consign arisulos inatuis.</p>
    </div>
  </div>

CSS 

section#company div#companyInfo {
  height: 24em;
  line-height: 3em;
  margin: 0 auto;
  color: #fff;
}
section#company div#companyInfo div.infoWrapper {
  width: 960px;
  margin: 5em auto;
  text-align: center;
}
section#company div#companyInfo div.infoWrapper h1 {
  font-size: 2em;
}
section#company div#companyInfo div.infoWrapper p {
  line-height: 1.2em;
  font-size: 1.125em;
}
section#company .circlefront {
  background: rgba(255, 255, 255, 0.7);
  width: 500px;
  height: 500px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  position: absolute;
  top: 300px;
  left: 400px;
}
section#company .circlemiddle {
  background: rgba(255, 255, 255, 0.5);
  width: 250px;
  height: 250px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  position: absolute;
  top: 100px;
  left: 200px;
}
section#company .circlerear {
  background: rgba(255, 255, 255, 0.3);
  width: 100px;
  height: 100px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  position: absolute;
  top: 350px;
  right: 100px;
}

jQuery 

<script src="asset/js/libs/jquery.stellar.min.js"></script> 
<script type="text/javascript">

$(function(){
            $.stellar({
                horizontalScrolling: false,
                verticalOffset: 0,
            });
        });
</script>

stellar.jsの使用に関するリソース stellar.js チュートリアル

4

1 に答える 1

4

私はあなたのウェブサイトを保存し、あなたのコードをいじりました。私にはすべて問題ないように見えますが、まだいくつかの問題があります。それで、すべてのスクリプト タグを削除し、Stellar デモから jQuery と Stellar を追加したところ、問題なく動作しました。

私が見つけたバグは 1 つだけですが、それがこの動作の理由かどうかはわかりません。の後に余分なコンマがありますverticaloffset:0。

$(function(){
    $.stellar({
        horizontalScrolling: false,
        verticalOffset: 0, /* Remove this comma at the end */
    });
});
于 2012-06-15T11:26:05.507 に答える