javascript - 如何实现视差滚动？

Question

这是链接供引用
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; }

但我有一个小问题。
在上面的站点中，两者都一次滚动，但右侧滚动缓慢它的工作原理....？
请帮助我...

Answer 1

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

请看一下这个解决方案。虽然不是很通用，但它可以给你一个良好的开端。当您在 fiddle 的 CSS 部分更改其高度时，右侧 div 的速度会自动调整。

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

• 确定页面的滚动，这样我们就知道 div 还滚动了多少。
• 使用页面高度、窗口高度和左侧 div 高度的知识来计算相对滚动。也就是说，从 0 到 1 的值向我们显示页面是根本没有滚动、滚动了一定量还是滚动到末尾。
• 根据窗口大小将相对滚动映射到慢速层的维度，以确定慢速层的精确滚动。