1

所以在过去的几天里，我一直在努力让它发挥作用。尽管一些 SO 成员已经帮助了我很多，但我仍然觉得我走错了路，因为我无法让它发挥作用。

这是一个小提琴。

基本上，我想根据滚动位置动态地将类添加/删除.show到里面的图像。.container在发布的示例中，我只是在尝试向下滚动。
如果您滚动的速度非常轻且缓慢，您会发现它确实有效，但速度太快了——这就是问题所在。
我的想法是定义一个阈值，在某些事情发生之前必须滚动，但不知何故我没有得到想要的结果。

此外，该scroll事件似乎在浏览器中不定期触发，所以我不知道如何通过它获得平滑的移动/过渡。我已经看过教程中的一些示例代码，它似乎总是有效！为什么不用我的例子？它与我的 CSS 有关吗？

请帮助我，我现在真的很沮丧。

例如，获取该教程页面并查看源代码。有一个名为的变量ScrollCount，每次运行该函数时都会递增。当ScrollCount达到 3 时，一些动画内容完成并ScrollCount重置为 1。这样，根据评论，每三个像素滚动一次鸟的翅膀就会发生变化。

但是根据对我的代码的观察，这不可能是真的，因为scroll触发该函数的事件似乎或多或少地随机触发 - 滚动的速度越快，“跳过”的像素越多 - 至少在我的代码中，所以一定有问题。

4

2 回答 2

4

Tying animation elements to the quantity of scroll events is going to give inconsistent results. On the sample page you linked, the animation is tied to both absolute scroll position and quantity of scroll events, which can give some strange results.

There's so many different ways to scroll a view, and all of them will produce a different numbers of scroll events and scroll distances.

  • Mouse wheel (affected by system mouse settings, resolution of mouse)
  • Keyboard up and down keys (affected by system key repeat rates)
  • Page up and down (possibly affected by some other settings?)
  • Dragging the scroll bar (affected by all sorts of things)

And then all of these may well behave differently based on the browser.

In short? Tying animation to the quantity of scroll events sounds like a bad idea to me. Instead, why not just tie it to the scroll position?

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();
}

And here's the fiddle.

于 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 回答