轻量级的的视差引擎Parallax.js学习分享，插件官方描述：简单，轻量级的的视差引擎，智能设备的方向作出反应。凡没有陀螺仪或运动检测硬件是可用的，光标的位置来代替。主要实现效果比如说PC端实现一些小元素，随光标拖动运动效果（效果应用实例站点：https://tyyey.jssnd.edu.cn）。

应用方法：

首先下载Parallax.js，引入到页面中，然后选择父DOM元素，并把它传递给视差的构造函数。

示例结构：

<ul id="scene" class="scene">
    <li class="layer" data-depth="1.00"><img src="images/icon-pic-01.png"></li>
    <li class="layer" data-depth="0.80"><img src="images/icon-pic-02.png"></li>
    <li class="layer" data-depth="0.60"><img src="images/icon-pic-03.png"></li>
    <li class="layer" data-depth="0.40"><img src="images/icon-pic-04.png"></li>
</ul>

<script>$('#scene').parallax();</script>

//下面是jQ详细参数，默认等同上面语句。

<script>
    $('#scene').parallax({
      calibrateX: false,  //指定是否根据初始时x轴的值来计算运动量
      calibrateY: true,  //指定是否根据初始时y轴的值来计算运动量
      invertX: false,  //设置为true则按反方向运动层
      invertY: true,  //设置为true则按反方向运动层
      limitX: false,  //x方向上总的运动量数值范围，设置为false则允许层自由运动
      limitY: 10,  //y方向上总的运动量数值范围，设置为false则允许层自由运动
      scalarX: 2,  //输入的运动量和这个值相乘，增加或减少层运动的灵敏度
      scalarY: 8,  //输入的运动量和这个值相乘，增加或减少层运动的灵敏度
      frictionX: 0.2,  //层运动的摩擦量，实际上是在层上添加一些easing效果
      frictionY: 0.8  //层运动的摩擦量，实际上是在层上添加一些easing效果
    });
</script>

第二，给需要实现移动的层指定深度元素（data-depth）。深度0，层保持静止，深度为1，层移动至所计算的运动的总效应。值0和1之间值变化，实现层移动的比例。

第三，每个移动层实现样式位置定义的时候，需要使用!important去提高优先级定义。例如给第一个元素定义位置时，需要去强制top和left值的内容，光标指向也是改变top和left值：

.layer:nth-child(1) {
  opacity: 0.15;
  top: 100px !important;
  left: 80% !important;
  position: relative;
  width: 200px;
  height: 300px;
}