定时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/