当前的位置:首页> 素材源码 >    轻量级的的视差引擎Parallax.js
雕刻时光

雕刻时光

轻量级的的视差引擎Parallax.js

来源:互联网 作者:未知 2020-05-10 浏览量: 135 分享到:

文章摘要 / summary

Parallax.js 是一个简单的,轻量级的的视差引擎,能够对智能设备的方向作出反应。在没有没有陀螺仪或运动检测硬件可用的时候,使用光标的位置来代替。有很多的行为,你就……

轻量级的的视差引擎Parallax.js

使用步骤

只需创建一个列表,给每个项目要内移动您的视差场景一类层和数据深度属性指定场景内的深度的元素。深度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);

免责声明

文章来源:互联网  作者:未知
本站所转载文章内容均系原作者个人观点,不代表本站对其观点赞同或支持,版权归原作者所有,转载请保留出处。