javascript - 如何实现视差滚动？

这是链接供引用
http://readwrite.com/2013/02/07/robert-scoble-favorite-apps-facebook-gmail-youtube

如果我们滚动“中心”部分，则一次同时滚动该站点中“中心”和“右部分” ...

我用此代码完成了相同的操作:-

这是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; }

但是我有一点问题。
在上面的站点中，每次都滚动一次，但是右侧滚动缓慢，它的工作方式....？
请帮我...

最佳答案

http://jsfiddle.net/cuVC7/0/

请看一下这个解决方案。尽管不是很通用，但它可以为您提供一个良好的开端。当您在小提琴的CSS部分中更改其div的高度时，会自动调整其速度。

应该注意的是，像2D视差相关的问题需要具备基本的数学知识。上面的示例使用此模型:

确定页面的滚动，因此我们知道滚动了多少剩余的div。

使用页面高度，窗口高度和左侧div的高度的知识来计算相对滚动。也就是说，从0到1的值向我们显示页面是完全不滚动，不滚动一定数量还是滚动到末尾。

根据窗口大小将相对滚动映射到慢层的尺寸，以确定慢层的确切滚动。