Question

我制作了jQuery parallax，当它位于页面顶部时工作正常，但当我将它移动到页面底部时，我已经完全从视图中向下滚动它。

下面我在页面上均匀分布了3个视差图像（这些图像之间的元素具有相同的高度），因此我可以安全地将每个下一个视差图像调整为比前一个慢两倍然后按时间滚动到页面末尾更多甚至更少，我相信我可以更准确地计算时间

然而，如果我增加第一和第二视差图像之间的间距，那么时间必须改变，是否有更好的方法使它工作？

我认为其中一种可能性是知道从页面顶部到视差图像顶部的距离（例如600px）然后只有当滚动条达到说300px时我们才能开始对第一个图像进行parallaxing，但这是一个正确的方法做到了吗？

的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/

时间jquery背景视差效果

1 个答案: