滚动视差不是很新鲜的技术了，从过去几年里一直到现在依然很盛行，近期切图网（qietu.com）接到了一个艰巨的前端外包切图开发项目，就是参考了国外的效果，当然也包含了滚动视差，这一度让开发难以进行，找了主流的几款滚动视差效果都不尽如人意，比如rellax.min.js ， skrollr.min.js 。

直到遇到了jquery.parallax-scroll ，问题得以解决。

jquery.parallax-scroll是一款效果超炫的平滑垂直滚动视觉差jQuery特效。该视觉差特效使用requestAnimationFrame和CSS3 3D transitions在页面垂直滚动时制作非常平滑的过渡动画效果。
浏览器兼容

Chrome 30+
Firefox 34+
Safari 7.1+
IE 10+

使用方法

使用该视觉差特效插件首先要引入jQuery和jquery.parallax-scroll.js以及jquery.easing.1.3.js（如果需要easing效果）文件。
<script src=”js/jquery-2.1.3.min.js”></script>
<script src=”js/jquery.easing.1.3.js”></script>
<script src=”js/jquery.parallax-scroll.js”></script>

然后在你需要制作视觉差效果的元素上添加data-parallax属性。data-parallax属性的值使用json语法，里面的键值对是你想要制作的视觉差效果的属性和取值。
<article>
<img src=”img/paris.jpg” alt=”Paris” data-parallax='{“y”: 230}’/>
<p>Paris est magique</p>
</article>
属性

x：在X轴上的移动距离，单位像素。
y：在Y轴上的移动距离，单位像素。
z：在Z轴上的移动距离，单位像素。
rotateX：绕X轴旋转的度数，单位degrees。
rotateY：绕Y轴旋转的度数，单位degrees。
rotateZ：绕Z轴旋转的度数，单位degrees。
scale：全局缩放比例。(ratio)
scaleX：X轴缩放比例。(ratio)
scaleY：Y轴缩放比例。(ratio)
scaleZ：Z轴缩放比例。(ratio)

配置参数

from-scroll：动画开始时的垂直滚动位置，默认值是当元素可见时的位置。
distance：在垂直滚动位置上最后动画的距离，默认是窗口的可见高度。
to-scroll：动画结束时的垂直滚动位置，默认值时from-scroll + distance。
smoothness：动画的缓速因子，数值越大动画越平滑。默认值30。
perspective：父元素上的3d perspective，制作3D空间效果。默认值800。
easing：动画的easing效果（注意：duration参数是必须的，distance和to-scroll会被忽略）。使用这个参数必须引入jquery.easing.1.3.js。
duration：easing动画的持续时间。没有指定easing参数时，该参数被忽略。
easing-return：在你向上滚动的时候，返回的easing函数，默认值是easing。
duration-return：Duration 的返回值，默认是duration。

多重动画

你可以增加data-parallax属性来设置多重动画效果。

data-parallax
data-parallax2
data-parallax3
data-parallax…

应用举例

下面以图片滚动视觉差为例子说明插件的使用方法。当浏览器窗口向下滚动，图片出现在浏览器窗口的底部，图片开始向下移动230像素，一直到图片消失在屏幕的顶部。就如同DEMO中的图片视觉差效果。
<img src=”img/paris.jpg” alt=”Paris” data-parallax='{“y” : 230}’/>

下面是在滚动距离超过50像素的时候，以一个平滑过渡效果向右移动<li>元素650像素。
<li data-parallax='{“x”: 650, “from-scroll”: 50, “distance”: 0, “smoothness”: 10}’>1</li>

接下来的例子是在滚动距离超过90像素的时候，将<li>元素向右移动650像素，然后在滚动距离超过400像素的时候，将<li>元素向下移动500像素.它们之间的滚动距离时60像素。
<li data-parallax='{“x”: 650, “from-scroll”: 90, “distance”: 0}’ data-parallax2='{“y”: 500, “from-scroll”: 400, “distance”: 60}’>3</li>

最后一个例子是在将元素沿X轴旋转1000度。
<p data-parallax='{“rotateX”:1000}’>!</p>

切图网基于2000+项目经验，推出web前端实战小班培训 —— 切入口，报名联系aming老师 dingxiangming82