創建垂直視差頁面

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/