视差滚动原理及实现

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为今年网页设计的热点趋势，越来越多的网站应用了这项技术。

QQ网站的效果地址：https://im.qq.com/
简易实现效果图：

视差滚动原理（最为常见的是在游戏中的应用）：

通过前景与背景在场景移动时产生不同的视差，从而达到简单的立体效果

页面上很多的元素在相互独立地滚动着，如果我们来对其它分层的话，可以有两到三层 ：背景层，内容层，贴图层

　　差异滚动的实现规则：

• 　　背景层的滚动(最慢)
• 　　贴图层(内容层和背景层之间的元素)的滚动(次慢)
• 　　内容层的滚动(可以和页面的滚动速度一致)

　　我们让三个图层的滚动速度不一致，就做出了漂亮的差异滚动效果

游戏举例：

当前景运动速度快于背景时，会带来更好的视觉游戏体验。

 代码如下：（效果图见最上面）