先说说什么是视差。
视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。
一般把网页解剖为:背景层、内容层和悬浮层(贴图层)。
当滚动鼠标滚轮的时候,各图层以不同速度移动,形成视差的效果。这就是时差滚动的大致原理。
原理是这样,但落实到技术细节上时,实现的方法却各种各样。
我个人大致归纳了一下:
1、以 “页面滚动条” 作为 “视差动画进度条” 的;
2、以 “滚轮刻度” 当作 “动画帧度” 去播放动画的(或者直接称为“隐藏进度条”);
3、鉴听mousewheel事件,事件被触发即播放动画,实现“翻页”效果;
下面的回答,均以上述1类的实现方式为基准。
为什么是1类呢?因为它很直观,和我们日常接触到的视频播放器是一样的: