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

地址：https://github.com/wagerfield/parallax

使用步骤

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

行为	值	描述
relativeInput	true orfalse	Specifies whether or not to use the coordinate system of the element passed to the parallax constructor. Mouse input only.
clipRelativeInput	true orfalse	Specifies whether or not to clip the mouse input to the bounds of the elementpassed to the parallax constructor. Mouse input only.
calibrate-x	true orfalse	Specifies whether or not to cache & calculate the motion relative to the initial x axis value on initialisation.
calibrate-y	true orfalse	Specifies whether or not to cache & calculate the motion relative to the initial y axis value on initialisation.
invert-x	true orfalse	true moves layers in opposition to the device motion, false slides them away.
invert-y	true orfalse	true moves layers in opposition to the device motion, false slides them away.
limit-x	numberorfalse	A numeric value limits the total range of motion in x, false allows layers to move with complete freedom.
limit-y	numberorfalse	A numeric value limits the total range of motion in y, false allows layers to move with complete freedom.
scalar-x	number	Multiplies the input motion by this value, increasing or decreasing the sensitivity of the layer motion.
scalar-y	number	Multiplies the input motion by this value, increasing or decreasing the sensitivity of the layer motion.
friction-x	number0 - 1	The amount of friction the layers experience. This essentially adds some easing to the layer motion.
friction-y	number0 - 1	The amount of friction the layers experience. This essentially adds some easing to the layer motion.
origin-x	number	The x origin of the mouse input. Defaults to 0.5 (the center). 0 moves the origin to the left edge, 1 to the right edge. Mouse input only.
origin-y	number	The y origin of the mouse input. Defaults to 0.5 (the center). 0 moves the origin to the top edge, 1 to the bottom edge. Mouse input only.

除了上述的行为，有两种方法enable（）和disable（），该激活和分别停用视差实例。