1、视觉差之parallax-mouse篇

一个简单，轻量级的的视差引擎，智能设备的方向作出反应。凡没有陀螺仪或运动检测硬件是可用的，光标的位置来代替。parallax视差有两种，一种是根据鼠标移动产生视差，一种是滚动网页产生的视差。当前介绍第一种。

使用方法：

引入视差js库：

<script type="text/javascript" src="js/jquery.parallax.min.js"></script><!--滚动视觉差-->

html：

<div class="layer" data-depth="0.2"></div>

说明：layer必备class，data-depth：偏移差，值越大，偏移量越大。

调用：

$(dom).parallax();

注意事项：

如果作用元素使用了绝对定位，请务必给定位的属性值加 !important ，不然会被parallax覆盖。点击查看示例

2、视觉差之parallax-scroll篇

parallax的第二种效果--滚动视觉差。

使用方法：

引入js库：

<script type="text/javascript" src="js/jquery.parallax-1.1.3.js"></script><!--滚动视觉差-->

html：

<div class="bg1" style="background:url(url) no-repeat center center fixed;"></div>

调用：

$('.bg1').parallax2(n1, n2);

说明：n1为初始背景距离左边的偏移（background-positionX），n2为偏移差，页面滚动速度的n2倍，建议值0-1之间，为0的时候，保持位置不动，没有视差效果；为1的时候，偏移值和滚动速度一致；为负的时候，反向偏移；大于1的时候，偏移量为滚动速度的n倍偏移。建议参考值：$('.bg1').parallax2("50%", 0.5);点击查看示例

优点：较下面的parallux视差效果，parallax可以做全屏滚动视差效果，也可以做固定高度的视差效果，案例里有演示。

3、视觉差之parallux篇

jQuery Parallux是一款可制作响应式网页滚动视觉差特效的jQuery插件。通过该插件可以制作背景图像，图像，视频，文本等HTML元素的滚动视觉差效果。

使用方法：

引入资源文件：

<link rel="stylesheet" type="text/css" href="css/jquery.parallux.min.css">
<script type="text/javascript" src="js/jquery.parallux.js"></script><!--滚动视觉差-->

参考html：

<div class="parallux bg-fixed">
    <div class="parallux-bg fixed">
        <div class="parallux-inner" style="background:url(test/parallux/1.jpg) no-repeat center center;"></div>
    </div>
</div>

调用：

$(".parallux").parallux({
     fullHeight: true //是否开启全屏
});

说明：parallux视差主要做整屏滚动特效，其滚动效果较parallax更为平滑一些。点击查看示例

4、视觉差之rellax篇

rellax.js是一款轻量级的纯JavaScript滚动视觉差特效插件。rellax.js压缩后的版本仅871个字节，在手机等小屏幕设备中，插件会自动限制视觉差特性。

使用方法：

引入js：

<script type="text/javascript" src="js/rellax.min.js"></script><!--滚动视觉差-->

html：

<div class="rellax" data-rellax-speed="-7"><img src=""></div>

为你需要设置视觉差效果的元素添加.rellax class类。然后通过data-rellax-speed属性来设置该元素的相对滚动速度。数值越大，滚动的越快。数值为负，反向运动。

调用：

var rellax = new Rellax('.rellax');

相比其他几个视差js，rellax优点在于，不仅可以做整屏滚动效果的视差，还可以单独的对元素做滚动视差效果。点击查看示例