輕量級的的視差引擎Parallax.js
阿新 • • 發佈：2019-01-24
地址：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. |