定時jQuery的背景視差效果

Question

我做了jQuery的視差時，其在頁面頂部，但是當我在一次移動設備到頁面底部向下我已經完全脫落從視圖滾動它工作正常。

下面我製作了3個均勻分佈在頁面上的視差圖像（這些圖像之間的元素具有相同的高度），所以我可以安全地調整每個下一個視差圖像比前一個慢兩倍然後我滾動到頁面結尾或多或少，甚至我相信我可以計算時間更精確地

但是如果我增加第一和第二視差圖像之間的間距則時間將有改變，有沒有更好的辦法，使工作？

我認爲其中一種可能性是知道從頁面頂部到視差圖像頂部的距離（例如600px），然後只有當滾動條達到300px時，我們才能開始parallaxing第一個圖像，但這是一種正確的方式去做吧？

的jsfiddle：http://jsfiddle.net/TkmLy/2/

jQuery的

$('section').scroll(function(){ 
    var x = $(this).scrollTop(); 
    $(this).find(".bg1").css('background-position','0% '+parseInt(-x/2)+'px'); 
    $(this).find(".bg2").css('background-position','0% '+parseInt(-x/4)+'px'); 
    $(this).find(".bg3").css('background-position','0% '+parseInt(-x/6)+'px'); 
}); 

CSS

<style> 
    html, body{ 
     height:100%; 
     min-height:100%; 
     margin:0; 
     padding:0; 
    } 

    section { 
     overflow-y:scroll; 
     height:100%; 
    } 

    .bg1{ 
     width:100%; 
     height:300px; 
     background: #cccccc url(http://demo.rocknrolladesigns.com/wp/jarvis/callouts/wp-content/uploads/2013/08/parallax4.jpg) no-repeat fixed 0 0; 
    } 

    .bg2{ 
     width:100%; 
     height:300px; 
     background: #cccccc url(http://demo.rocknrolladesigns.com/wp/jarvis/callouts/wp-content/uploads/2013/08/slider2.jpg) no-repeat fixed 0 0; 
    } 

    .bg3{ 
     width:100%; 
     height:300px; 
     background: #cccccc url(http://demo.rocknrolladesigns.com/wp/jarvis/callouts/wp-content/uploads/2013/08/sunset-hair.jpg) no-repeat fixed 0 0; 
    } 

</style> 

HTML

<section> 

xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/> 

<div class="bg1"></div> 

xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/> 

<div class="bg2"></div> 

xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/> 

<div class="bg3"></div> 

xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/>xxx<br/> 

</section> 

Answer 1

視差背景圖片，你需要有background-attachment: fixed;

視差背景圖像的計算方法是比較複雜那麼，我建議只是在這裏使用這個庫。目前它被很多主題和模板所使用。

https://github.com/IanLunn/jQuery-Parallax/