插件描述：简单，轻量级的的视差引擎，智能设备的方向作出反应。凡没有陀螺仪或运动检测硬件是可用的，光标的位置来代替。
简单，轻量级的的视差引擎，智能设备的方向作出反应。凡没有陀螺仪或运动检测硬件是可用的，光标的位置来代替。
使用步骤
只需创建一个列表，给每个项目要内移动您的视差场景一类层和数据深度属性指定场景内的深度的元素。深度0，将导致层保持静止，深度为1，将导致层移动至所计算的运动的总效应。值插图中0和1，会造成层移动相对于所提供的比例。
<ul id="scene"> <li class="layer" data-depth="0.00"><img src="layer6.png"></li> <li class="layer" data-depth="0.20"><img src="layer5.png"></li> <li class="layer" data-depth="0.40"><img src="layer4.png"></li> <li class="layer" data-depth="0.60"><img src="layer3.png"></li> <li class="layer" data-depth="0.80"><img src="layer2.png"></li> <li class="layer" data-depth="1.00"><img src="layer1.png"></li> </ul>
视差场景，请选择您的父DOM元素，并把它传递给视差的构造函数。
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);行为：数据属性的例子
<ul id="scene" data-calibrate-x="false" data-calibrate-y="true" data-invert-x="false" data-invert-y="true" data-limit-x="false" data-limit-y="10" data-scalar-x="2" data-scalar-y="8" data-friction-x="0.2" data-friction-y="0.8"> <li class="layer" data-depth="0.00"><img src="graphics/layer6.png"></li> <li class="layer" data-depth="0.20"><img src="graphics/layer5.png"></li> <li class="layer" data-depth="0.40"><img src="graphics/layer4.png"></li> <li class="layer" data-depth="0.60"><img src="graphics/layer3.png"></li> <li class="layer" data-depth="0.80"><img src="graphics/layer2.png"></li> <li class="layer" data-depth="1.00"><img src="graphics/layer1.png"></li> </ul>
行为：构造函数对象实例
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
});行为：API示例
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
parallax.enable();
parallax.disable();
parallax.calibrate(false, true);
parallax.invert(false, true);
parallax.limit(false, 10);
parallax.scalar(2, 8);
parallax.friction(0.2, 0.8);jQuery
$('#scene').parallax();jQuery的：传递选项
$('#scene').parallax({
calibrateX: false,
calibrateY: true,
invertX: false,
invertY: true,
limitX: false,
limitY: 10,
scalarX: 2,
scalarY: 8,
frictionX: 0.2,
frictionY: 0.8
});jQuery API
var $scene = $('#scene').parallax();
$scene.parallax('enable');
$scene.parallax('disable');
$scene.parallax('calibrate', false, true);
$scene.parallax('invert', false, true);
$scene.parallax('limit', false, 10);
$scene.parallax('scalar', 2, 8);
$scene.parallax('friction', 0.2, 0.8);
PREVIOUS:
NEXT:
相关插件-动画效果
讨论这个项目（21）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
洋洋 0
2017/12/18 16:19:05
这个效果以及官方案例都是整个页面。请问如何实现到局部呢？也就是移入父容器有效果，移出父容器无效果。
＆水若寒0
2017/12/21 19:59:12
我也在找这种方案，可惜还没找到
＆水若寒1
2017/12/21 21:11:31
我找到了一种方法解决这个问题。
$("#scene").hover(function(){
$('#scene').parallax('enable');
},function(){
$('#scene').parallax('disable');
});但感觉卡顿，还得在优化
555333222 1
2017/2/5 7:48:05
资源被删了 求哪位大侠发一份，万分感谢邮箱：1436684297@qq.com
西瓜0
2017/2/5 11:59:13
-
感谢反馈，下载资源以修改正确。
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
