Question

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

这是我的标记：

<!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>

基本上我想在滚动事件上逐个显示/隐藏它们，或者使用不透明度或者使用display属性。什么是最好的方法？查找delta值或scrolltop值？欢迎所有想法！

提前致谢

Answer 1

这样的事情应该这样做。编辑<form asp-action="Index" method="get"> <select asp-items="@ViewBag.List" name="selection" class="form-control" id="selectionDDL"> <option value="">All</option> </select> </form>以控制速度。

scrollResolution

Answer 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');
}

使用javascript滚动动画图像序列

2 个答案: