創建垂直視差頁面

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

我建議使用視差插件，嘗試使用stellar js，只需將數據屬性添加到元素中，即可實現動畫效果。

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