JQ的视觉差效果插件

插件：

jquery.parallax-scroll.js

---

如何使用：

在jQuery之后 插入脚本jquery.parallax-scroll.js（和jquery.easing.1.3.js，如果需要的话），不需要更多的javascript代码。 使用包含optionnals参数和您想要动画的属性的json语法将属性'data-parallax'添加到所需的dom元素。

---

功能：垂直页面滚动上平滑视差动画
浏览器兼容：Chrome 30+，Firefox 34+，Safari 7.1+，IE 10+
参数：

参数	介绍	使用
from-scroll	从哪里开始滚动	动画开始的垂直滚动位置（默认：当元素可见时）
distance	距离	动画将持续的垂直滚动位置距离（默认：窗口可见高度）

to-scroll*: 动画结束时的垂直滚动位置（默认：从滚动 + 距离）
smoothness: 使动画变慢的因素，光滑度越高（默认值：30）
perspective: 在使用z ax的情况下应用于父元素的3D透视图（默认值：800）

easing: 用于动画的缓动函数（请注意duration参数是必需的，距离和滚动将被忽略） - 使用选项功能需要使用jquery.easing.1.3.js。

duration: 缓动动画的持续时间，如果没有指定缓动参数（帧），将被忽略，
easing-return: 退回时缓动功能，当您向上滚动时（默认：缓动）
duration-return: 返回的持续时间（默认值：持续时间）

使用例子：
在垂直滚动时从图像底部显示到屏幕顶部消失时，将图像向下移动230像素。
<img src="img/paris.jpg" alt="Paris" data-parallax='{"y" : 230}'/>

当垂直滚动位置超过50像素时，向右平移650像素，平滑效果较低：
<li data-parallax='{"x": 650, "from-scroll": 50, "distance": 0, "smoothness": 10}'>1</li>

当垂直滚动位置超过90像素时，向右平移650像素，然后当滚动距离为60像素时垂直滚动位置超过400像素时，平移至底部500像素
<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>

参考文章：

https://github.com/alumbo/jquery.parallax-scroll
jQuery Parallax Scrolling Website(视差滚动网站制作)
视差滚动(Parallax Scrolling)效果的原理和实现

JQ实现滚动差

---

预览效果：

https://www.bluesdream.com/case/jquery/jquery-parallax-scrolling/