个人笔记-Parallax.js

Parallax.js
功能强大的视觉差特效插件

个人笔记仅供参考，参考网页：https://www.wenjiangs.com/article/parallax-js.html

该视觉差特效的基本HTML结构使用的是一个无序列表，每一个列表项给它们一个class layer和一个data-depth属性来指定该层的深度。深度为0的层将是固定不动的，深度为1的层运动效果最激烈的层。0-1之间的层会根据值来相对移动。

<ul id="scene">
  <li data-depth="1"><img src="img/card1.png"></li>
  <li data-depth="1"><img src="img/card2.png"></li>
  <li data-depth="1"><img src="img/card3.png"></li>
  <li data-depth="1"><img src="img/card4.png"></li>
  <li data-depth="1"><img src="img/card5.png"></li>
  <li data-depth="1"><img src="img/card6.png"></li>
</ul>

初始化插件
要初始化视觉差效果，可以选择指定的DOM元素之后，创建一个新的Parallax对象。

var scene = document.getElementById(‘scene’);
var parallax = new Parallax(scene);

配置参数
下面是一些可用的配置参数，这些参数也可以在HTML标签中使用data属性来指定。

relativeInput	true或false	Specifies whether or not to use the coordinate system of the element passed to the parallax constructor. Mouse input only
clipRelativeInput	true 或false	Specifies whether or not to clip the mouse input to the bounds of the element passed to the parallax constructor. Mouse input only
calibrate-x	true 或false	指定是否根据初始时x轴的值来计算运动量
calibrate-y	true 或false	指定是否根据初始时y轴的值来计算运动量
invert-x	true 或false	设置为true则按反方向运动层
invert-y	true 或false	设置为true则按反方向运动层
limit-x	number 或false	x方向上总的运动量数值范围，设置为false则允许层自由运动
limit-y	number 或false	y方向上总的运动量数值范围，设置为false则允许层自由运动
scalar-x	number	输入的运动量和这个值相乘，增加或减少层运动的灵敏度
scalar-y	number	输入的运动量和这个值相乘，增加或减少层运动的灵敏度
friction-x	number 0-1	层运动的摩擦量，实际上是在层上添加一些easing效果
friction-y	number 0-1	层运动的摩擦量，实际上是在层上添加一些easing效果
origin-x	number	鼠标输入的x原点，默认值是0.5。0会移动原点到页面的左边，1会移动原点到页面的右边。Mouse input only
origin-y	number	鼠标输入的x原点，默认值是0.5。0会移动原点到页面的上边，1会移动原点到页面的下边。Mouse input only

Data 属性举例
构造函数方式举例
var scene = document.getElementById(‘scene’);
var parallax = new Parallax(scene, {
calibrateX: false,
calibrateY: true,
invertX: false,
invertY: true,
limitX: false,
limitY: 10,
scalarX: 2,
scalarY: 8,
frictionX: 0.2,
frictionY: 0.8,
originX: 0.0,
originY: 1.0
});