1

そのため、ここ数日間、これを機能させるのに苦労しています。一部のSOメンバーはすでに私を大いに助けてくれましたが、これを機能させることができないため、私はまだ間違った方向に進んでいると感じています。

これがフィドルです。

基本的には、スクロール位置に応じて、クラス.showを内部の画像に動的に追加/削除したいと思います。.container投稿された例では、ダウンスクロールのためにこれを試みています。
本当に軽くゆっくりとスクロールすると、実際に機能していることがわかりますが、速すぎます。これが問題です。
私の考えは、何かが起こる前にスクロールしなければならないしきい値のようなものを定義することですが、どういうわけか私は望ましい結果を得ることができません。

また、scrollブラウザではイベントが定期的にトリガーされていないようですので、スムーズに移動/移行する方法がわかりません。私はすでにチュートリアルからいくつかのサンプルコードを見ました、そしてそこでそれはいつもうまくいくようです！なぜ私の例ではないのですか？それは私のCSSと関係がありますか？

私を助けてください、私は今本当にイライラしています。

たとえば、そのチュートリアルページを見て、ソースを見てください。ScrollCount関数が実行されるたびにインクリメントされると呼ばれる変数があります。3にScrollCount達すると、いくつかのアニメーションが実行ScrollCountされ、1にリセットされます。コメントによると、3ピクセルごとにスクロールすると、鳥の羽が変化します。

しかし、私のコードでの観察によれば、これは真実ではありませんscroll。関数をトリガーするイベントが多かれ少なかれランダムに発生するように見えるためです。スクロールが速いほど、より多くのピクセルが「スキップ」されます。少なくとも私のコードでは、だから何かが間違っている必要があります。

4

2 に答える 2

4

アニメーション要素をスクロールイベントの数に関連付けると、一貫性のない結果が得られます。リンクしたサンプルページでは、アニメーションは絶対スクロール位置とスクロールイベントの量の両方に関連付けられているため、奇妙な結果が生じる可能性があります。

ビューをスクロールする方法はたくさんあり、それらすべてが異なる数のスクロールイベントとスクロール距離を生成します。

  • マウスホイール（システムマウス設定、マウスの解像度の影響を受けます）
  • キーボードの上下キー（システムキーの繰り返し率の影響を受けます）
  • Page Up and Down（他の設定の影響を受ける可能性がありますか？）
  • スクロールバーをドラッグする（あらゆる種類の影響を受ける）

そして、これらはすべて、ブラウザに基づいて異なる動作をする可能性があります。

要するに？アニメーションをスクロールイベントの量に結び付けることは、私には悪い考えのように思えます。代わりに、それをスクロール位置に結び付けてみませんか？

function animateHorse() {
    var currentScrollPosition = window.pageYOffset;
    var imageIndex = Math.round(currentScrollPosition / scrollResolution);

    if (imageIndex >= pictureCount) {
        imageIndex = pictureCount - 1; // Select last image
    }

    $("#container img").hide();
    $("#container img").eq(imageIndex).show();
}

そして、これがフィドルです。

于 2013-03-07T10:03:55.637 に答える
0

これが実際のデモで、馬のアニメーションを見ることができます...

onload = function startAnimation() {
  var frames = document.getElementById("animation").children;
  var frameCount = frames.length;
  var i = 0;
  setInterval(function() {
    frames[i % frameCount].style.display = "none";
    frames[++i % frameCount].style.display = "block";
  }, 100);
}
#animation img {
  display: none;
}
#animation img:first-child {
  display: block;
}
<div id="animation">
  <img src="http://s23.postimage.org/t57meexkb/horse_1.png" class="animated" />
  <img src="http://s23.postimage.org/i86apnasr/horse_2.png" class="animated" />
  <img src="http://s23.postimage.org/6kc8v3lnv/horse_3.png" class="animated" />
  <img src="http://s23.postimage.org/w4ej1j71n/horse_4.png" class="animated" />
  <img src="http://s23.postimage.org/ddclrdch7/horse_5.png" class="animated" />
  <img src="http://s23.postimage.org/nbxkdulwr/horse_6.png" class="animated" />
  <img src="http://s23.postimage.org/phrv8cpd7/horse_7.png" class="animated" />
  <img src="http://s23.postimage.org/n1un88wob/horse_8.png" class="animated" />
  <img src="http://s23.postimage.org/9yz0oz6gb/horse_9.png" class="animated" />
  <img src="http://s23.postimage.org/6gn0sl5kb/horse_10.png" class="animated" />
  <img src="http://s23.postimage.org/vnxwsu8ob/horse_11.png" class="animated" />
  <img src="http://s23.postimage.org/bhuetyd0r/horse_12.png" class="animated" />
  <img src="http://s23.postimage.org/imc82zka3/horse_13.png" class="animated" />
  <img src="http://s23.postimage.org/auvi4fg4r/horse_14.png" class="animated" />
</div>

http://jsfiddle.net/u20yvyp9/

于 2015-01-29T05:43:30.513 に答える