标签：运动量 scene 笔记 js Parallax input false parallax
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。