如何实现视差滚动？答案

【问题标题】：how to implement parallax scrolling?如何实现视差滚动？
【发布时间】：2013-02-07 21:46:13
【问题描述】：

这是链接供参考
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; }

但我有一点问题。
在上面的站点中，一次滚动，但右侧滚动缓慢，它的工作原理是什么....？
请帮帮我...

【问题讨论】：

它叫做视差滚动...
@Vloxxity 非常感谢伙计……这怎么可能有什么想法？
我告诉过你它是如何被调用的，所以你可以自己用谷歌搜索答案 xD
这个问题与 PHP 有什么关系？
另见stackoverflow.com/questions/13078800/parallax-sidebar-scrolling/…

标签： javascript css scroll parallax

【解决方案1】：

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

请查看此解决方案。虽然不是很普遍，但它可以给你一个好的开始。右侧div 的速度会随着您在小提琴的 CSS 部分中更改其高度而自动调整。

需要注意的是，像这样的 2D 视差相关问题需要基本数学知识。上面的示例使用了这个模型：

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

【讨论】：

【解决方案2】：

您必须覆盖其中一个 div（在 js 中）的滚动行为，并将其设置为例如另一个的0.5。看看这里： http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/

【讨论】：