视差滚动教程、实现方法、源代码

最近很流行“视差滚动”效果，抛开设计不说，前端上的实现方法很有意思，国内详细的教程不多，所以自己研究别人网站，实践总结。

一、例子

SmaShing

Spark

QQ浏览器

二、原理

传统的网页的文字、图片、背景都是一起按照相同方向相同速度滚动的，偶尔有一些背景固定的网页。

顾名思义“视差滚动”就是通过滚动这个行为实现视觉上的层次错落的错觉，从而形成立体的运动效果。

其实分析各个优秀的例子网站，不难发现其实原理一样的，手法上也大同小异，都是通过控制多层的透明背景，在滚动的时候不再是只向上运动，而是以不同的速度、不同的方向去运动，再结合现实世界的运动规律，从而达到很棒的视觉冲击和交互

三、讲解

先分析下SmaShing 这个相对简单的例子。

观察此例子不难发现实现方法：最上层的页面元素（文字、图片）按照正常的方式滚动，背景通过JS往下方运动，从而实现了视差滚动

可以发现主体是由4个section标签组成的：

注意看属性：

data-type 类型，JS用来按类型选取元素

data-speed 速度，用于储存移动速度，供JS调用

style="background-pos