如何实现视差滚动效果的网页？

如何实现视差滚动效果的网页？

先说说什么是视差。

视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。

一般把网页解剖为：背景层、内容层和悬浮层(贴图层)。
当滚动鼠标滚轮的时候，各图层以不同速度移动，形成视差的效果。这就是时差滚动的大致原理。

原理是这样，但落实到技术细节上时，实现的方法却各种各样。
我个人大致归纳了一下：
1、以 “页面滚动条” 作为 “视差动画进度条” 的；
2、以 “滚轮刻度” 当作 “动画帧度” 去播放动画的（或者直接称为“隐藏进度条”）；
3、鉴听mousewheel事件，事件被触发即播放动画，实现“翻页”效果；

下面的回答，均以上述1类的实现方式为基准。
为什么是1类呢？因为它很直观，和我们日常接触到的视频播放器是一样的：