javascript – 如何实现视差滚动？

这是链接供参考

如果我们滚动中心部分,在这个站点中心和右侧部分都滚动一次…

我完成了与此代码相同： –

这是HTML代码： –

<div id="left" class="linked">
<img height="600" src="http://www.visitingdc.com/images/eiffel-tower-picture.jpg">
</div>
<div id="right" class="linked">
<img  src="http://www.visitingdc.com/images/eiffel-tower-picture.jpg">
</div><br>

脚本：-

$(function(){

    $('.linked').scroll(function(){
        $('.linked').scrollTop($(this).scrollTop());    
    })

})

CSS： –

<br>#left { width: 300px; height: 400px; overflow: scroll; float: left; }
#right { width: 300px; height: 400px; overflow: scroll; float: left; }

但我有一点点问题.

在上面的网站都滚动一次,但右侧是滚动慢如何工作….？

请帮我…

请看一下这个解决方案.虽然不是很普遍,但它可以给你一个很好的开始.当您在小提琴的CSS部分中更改其高度时,右侧div的速度会自动调整.

应该注意的是,像这样的2D视差相关问题需要基本数学知识.上面的示例使用此模型：

>确定页面的滚动,这样我们就知道滚动了多少div.

>使用页面高度,窗口高度和左侧div高度的知识来计算相对滚动.也就是说,从0到1的值向我们显示页面是否完全没有滚动,滚动了一些量,或滚动到结尾.

>根据窗口大小将关联滚动映射到慢层的尺寸,以确定慢层的精确滚动.