Parallax.js
Gihub
https://github.com/wagerfield/parallax快速使用
<div id="scene">
<div data-depth="0.2">My first Layer!</div>
<div data-depth="0.6">My second Layer!</div>
</div>
<script>
var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene, {
// 参数
});
</script>参数说明
参数 | html属性 | 类型 | 说明 |
|---|---|---|---|
relativeInput | data-relative-input | 布尔 | 相对于场景元素的位置进行鼠标输入 |
clipRelativeInput | data-clip-relative-input | 布尔 | 将鼠标输入剪辑到场景的边界 |
hoverOnly | data-hover-only | 布尔 | 鼠标离开元素时是否回复元素位置 |
inputElement | data-input-element | 字符串 | 允许使用不同的元素进行光标输入 |
calibrateX | data-calibrate-x | 布尔 | 初始化时缓存初始X轴值 |
calibrateY | data-calibrate-y | 布尔 | 初始化时缓存初始Y轴值 |
invertX | data-invert-x | 布尔 | 反转X层相对于输入的移动 |
invertY | data-invert-y | 布尔 | 反转Y层相对于输入的移动 |
limitX | data-limit-x | 整数/false | 限制X层在各自轴上的移动 |
limitY | data-limit-y | 整数/false | 限制Y层在各自轴上的移动 |
scalarX | data-scalar-x | 浮点数 | X层移动的速度 |
scalarY | data-scalar-y | 浮点数 | Y层移动的速度 |
frictionX | data-friction-x | 浮点数(0-1) | 施加到X层的摩擦量 |
frictionY | data-friction-y | 浮点数(0-1) | 施加到Y层的摩擦量 |
originX | data-origin-x | 浮点数(0-1) | X的原点，0.5为中点 |
originY | data-origin-y | 浮点数(0-1) | Y的原点，0.5为中点 |
precision | data-precision | 整数 | 元素位置保留的小数 |
selector | data-selector | 字符串/null | 通过css选择器选择生效的元素 |
pointerEvents | data-pointer-events | 布尔 | 是否启用场景和层元素的交互 |
onReady | 无 | null/function | 实例完成设置后将立即调用的回调函数 |
内置方法
方法 | 说明 |
|---|---|
enable | 启用禁用的视差实例 |
disable | 禁用正在运行的视差实例 |
destroy | 完全销毁视差实例，允许它被垃圾收集 |
Version | 返回视差库的版本号 |