个人笔记-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
});
标签：运动量,scene,笔记,js,Parallax,input,false,parallax 来源： https://blog.csdn.net/pokemonsnivy/article/details/119105349