Question

我正在尝试使用jquery创建类似于http://editions.redbullusa.com的垂直滚动网页。我遇到了下面的脚本，当我向下滚动页面时，我能够正确淡入元素，但是当下一个元素滚动到位并且向后滚动淡入时，我希望前一个元素淡出正确的元素，实质上是反转脚本。

    slides = $('.slide');
slides.children().fadeTo(0, 0);
$('#slide-1').children().fadeTo(1000, 1);
$(window).scroll(function(d,h) {
    slides.each(function(i) {
        a = $(this).position().top + $(this).height();
        b = $(window).scrollTop() + $(window).height();
        if (a < b) { 
            $(this).addClass('current');
            $(this).children().fadeTo(1000,1);
            $(this).children('.polaroid').addClass('fadeInRightBig');
            $(this).siblings().removeClass('current');
        }
    });
});

我真的不知道如何实现这一目标。我希望有人可以帮助我。我正在玩的网站是http://interesponse.com/curryacura/index2.php

Answer 1

我建议使用视差插件，尝试恒星js，只需将数据属性添加到元素中，恒星将处理动画。

http://markdalgleish.com/projects/stellar.js/

创建垂直视差页面

1 个答案: