定時jQuery背景視差效果

Question

我制作了jQuery視差，當它在頁面頂部時可以正常工作，但是當我將其移動到頁面底部時，當我向下滾動它時，它已經完全脫離視圖了。

在下面，我制作了3個視差圖像均勻地分布在頁面上（這些圖像之間的元素具有相同的高度），因此我可以安全地將每個下一個視差圖像調整為比上一個慢2倍，然后在我滾動到頁面末尾時或多或少地均勻我相信我可以更精確地計算時間

但是，如果我增加了第一和第二個視差圖像之間的間隔，那么時序將不得不改變，是否有更好的方法來使其工作？

我認為可能性之一是知道從頁面頂部到視差圖像頂部的距離（例如600px），然后只有當滾動條達到300px時，我們才能開始對第一幅圖像進行視差，但這是這樣做的正確方法嗎？

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/