在滚动时使用 javascript 动画图像序列答案

【问题标题】：Animate image sequence with javascript on scroll在滚动时使用 javascript 动画图像序列
【发布时间】：2014-08-26 14:43:11
【问题描述】：

大家好，我有一组图像需要在滚动事件上进行动画处理，就好像它们是电影帧一样。

这是我的标记：

<!doctype html>
<html lang="en">
    <head>
            ....

    </head>
    <body>
        <div id="main">
            <img src="images/phone20.png" />
            <img src="images/phone19.png" />
            <img src="images/phone18.png" />
            <img src="images/phone17.png" />
            <img src="images/phone16.png" />
            <img src="images/phone15.png" />
            <img src="images/phone14.png" />
            <img src="images/phone13.png" />
            <img src="images/phone12.png" />
            <img src="images/phone11.png" />
            <img src="images/phone10.png" />
            <img src="images/phone9.png" />
            <img src="images/phone8.png" />
            <img src="images/phone7.png" />
            <img src="images/phone6.png" />
            <img src="images/phone5.png" />
            <img src="images/phone4.png" />
            <img src="images/phone3.png" />
            <img src="images/phone2.png" />
            <img src="images/phone1.png" />

        </div>

    </body>
</html>

基本上，我想在滚动事件中使用不透明度或显示属性一一显示/隐藏它们。最好的方法是什么？查找增量值或滚动顶部值？欢迎所有想法！

提前致谢

【问题讨论】：

您是希望屏幕实际移动还是只是将幻灯片重叠显示 - 如果是后者（如果没有屏幕移动，您可能需要使用 ui slider 来使用 slide event获得可用于动画图像的值
只要鼠标滚轮触发序列，屏幕是否移动无关紧要
查看本教程...tympanus.net/codrops/2013/07/02/…我认为它可以满足您的需求。

标签： javascript jquery css scroll sequence

【解决方案1】：

应该这样做。编辑scrollResolution以控制速度。

var picture = $('#main img');
var pictureCount = picture.length;
var scrollResolution = 75;    

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

    if (imageIndex >= pictureCount) {
        imageIndex = pictureCount - 1;
    }

    picture.hide();
    picture.eq(imageIndex).show();
}

animateScroll();

$(window).bind('scroll', function() {
    animateScroll();
});

【讨论】：

【解决方案2】：

或者这个：

function animateScroll(container) {

  var img = $(container).find('.sequence img');

   $(container).find('.sequence img').eq(0).hide()
       .next('img').show()
       .end().appendTo($(container).find('.sequence'));
}      

$(window).bind('scroll', function() {
    animateScroll('#main');
}

【讨论】：