当前的位置:首页首页 > 资源分享 > 前端资源
轻量级的的视差引擎Parallax.js
日期:2020-02-13 21:45:39 来源:pc小白 作者:pc小白 次浏览
分享:

摘要:简单,轻量级的的视差引擎,智能设备的方向作出反应。凡没有陀螺仪或运动检测硬件是可用的,光标的位置来代替。

简单,轻量级的的视差引擎,智能设备的方向作出反应。凡没有陀螺仪或运动检测硬件是可用的,光标的位置来代替。

使用步骤

只需创建一个列表,给每个项目要内移动您的视差场景一类层和数据深度属性指定场景内的深度的元素。深度0,将导致层保持静止,深度为1,将导致层移动至所计算的运动的总效应。值插图中0和1,会造成层移动相对于所提供的比例。

1
2
3
4
5
6
7
8
<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元素,并把它传递给视差的构造函数。

1
2
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);

行为:数据属性的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>

行为:构造函数对象实例

1
2
3
4
5
6
7
8
9
10
11
12
13
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示例

1
2
3
4
5
6
7
8
9
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
parallax.enable();
parallax.disable();
parallax.calibrate(falsetrue);
parallax.invert(falsetrue);
parallax.limit(false, 10);
parallax.scalar(2, 8);
parallax.friction(0.2, 0.8);

jQuery

1 $('#scene').parallax();

jQuery的:传递选项

1
2
3
4
5
6
7
8
9
10
11
12
$('#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

1
2
3
4
5
6
7
8
var $scene = $('#scene').parallax();
$scene.parallax('enable');
$scene.parallax('disable');
$scene.parallax('calibrate'falsetrue);
$scene.parallax('invert'falsetrue);
$scene.parallax('limit'false, 10);
$scene.parallax('scalar', 2, 8);
$scene.parallax('friction', 0.2, 0.8);

注:本站所转载文章,目的在于帮助更多的人学习交流,不代表本站观点,如有侵权可联系管理员删除。但对于本站原创文章,转载需注明出处和链接。更多有关电脑、手机、平面/前端设计、建站知识和技巧,欢迎搜索关注微信公众号:“PC电脑小白”。
本文链接:https://pcxiaobai.com/resource/frontresource/20200213/901.html