轻量级的的视差引擎Parallax.js
容寒
建立
用npm install --save https://github.com/wagerfield/parallax或yarn add https://github.com/wagerfield/parallax。
现在，您可以根据自己喜欢的工作流程要求或导入库。
const Parallax = require（' allax-js '）
//或
从' allax-js '导入 allax.js
当然，您也可以简单地从dist文件夹中复制编译的文件，并将其包含在任何其他第三方脚本中。确保npm install在Parallax文件夹中运行以编译项目。或从发行部分下载预编译的文件。
< script src = “ dist /allax.js ” > </ script >
<！ -或者如果你喜欢minified - >
< script src = “ dist /allax.min.js ” > </ script >
创建一个元素的列表，给出您要在视差场景中移动的每个项目的类别layer和data-depth指定其在场景中的深度的属性。的深度0将导致层保持静止，和深度1将使层通过所计算出的运动的总效果移动。0和1之间的值将导致图层相对于提供的比例移动一个量。
< div id = “ scene ” >
< div class = “ layer ” data-depth = “ 0.00 ” > < img src = “ layer1.png ” > </ div >
< div class = “ layer ” data-depth = “ 0.20 ” > < img src = “ layer2.png ” > </ div >
< div class = “ layer ” data-depth = “ 0.40 ” > < img src = “ layer3.png ” > </ div >
< div class = “ layer ” data-depth = “ 0.60 ” > < img src = “ layer4.png ” > </ div >
< div class = “ layer ” data-depth = “ 0.80 ” > < img src = “ layer5.png ” > </ div >
< div class = “ layer ” data-depth = “ 1.00 ” > < img src = “ layer6.png ” > </ div >
</ div >
要启动视差场景，请选择您的父DOM元素并将其传递给Parallax构造函数。
var scene = document.getElementById（' scene '）
//或者，如果你使用jQuery
var scene = $（' #scene '）.get（0）;
var parallax= new Parallax(scene);
互动
如果您需要与图层进行交互，请勿忘记设置该pointerEvents选项，并调整图层CSS。
然后为所有图层子元素设置一个绝对位置，就像它完成的那样examples/pages/interactive.html。或者，设置pointer-events: none在图层和pointer-events: all图层子元素上。
了解层运动计算
每层移动的运动量取决于3个因素：
- 的
scalarX和scalarY值（参见行为下面的配置） - 父DOM元素的尺寸
- 所述
depth视差场景内的层的（由它的指定的data-depth属性）
这项动议的计算如下：
xMotion = parentElement。width *（scalarX / 100）* layerDepth
yMotion = parentElement。height *（scalarY / 100）* layerDepth
因此，对于具有一个层data-depth的值0.5的场景内具有两个scalarX和scalarY设置为值10（默认），其中包含场景元件是1000px x 1000px，在两个层的总运动x和y将是：
xMotion = 1000 *（10 / 100）* 0.5 = 50 // 50像素在正的和负的运动X
yMotion = 1000 *（10 / 100）* 0.5 = 50 // 50像素在y中正极和负极的运动
行为
您可以为任何给定的Parallax实例设置一些行为。这些行为可以通过数据属性在标记中指定，也可以通过构造函数和API在JavaScript中指定。
| 行为 | 值 | 默认 | 描述 |
|---|---|---|---|
relativeInput | true 要么 false | false | 指定是否使用场景的坐标系。鼠标输入。 |
clipRelativeInput | true 要么 false | false | 指定是否将鼠标输入剪辑到场景边界。无效果hoverOnly。鼠标输入。 |
hoverOnly | true 要么 false | false | 仅当光标在场景上时才应用视差效果。最好一起relativeInput设定为真。鼠标输入。 |
calibrate-x | true 要么 false | false | 指定是否在初始化时缓存并计算相对于初始x轴值的运动。 |
calibrate-y | true 要么 false | true | 指定是否在初始化时缓存并计算相对于初始y轴值的运动。 |
invert-x | true 要么 false | true | true移动层与设备运动相反，将false它们滑开。 |
invert-y | true 要么 false | true | true移动层与设备运动相反，将false它们滑开。 |
limit-x | number 要么 false | false | 数值限制了运动的总范围x，false允许层以完全自由的方式移动。 |
limit-y | number 要么 false | false | 数值限制了运动的总范围y，false允许层以完全自由的方式移动。 |
scalar-x | number | 10.0 | 将输入运动乘以该值，增加或降低层运动的灵敏度。 |
scalar-y | number | 10.0 | 将输入运动乘以该值，增加或降低层运动的灵敏度。 |
friction-x | number 0 - 1 | 0.1 | 各层经历的摩擦量。这实际上增加了一些缓和层运动。 |
friction-y | number 0 - 1 | 0.1 | 各层经历的摩擦量。这实际上增加了一些缓和层运动。 |
origin-x | number | 0.5 | x鼠标输入的起源。默认为0.5（中心）。0将原点移动到左边缘1到右边缘。鼠标输入。 |
origin-y | number | 0.5 | y鼠标输入的起源。默认为0.5（中心）。0将原点移动到顶部边缘，1到底部边缘。鼠标输入。 |
precision | integer | 1 | 元素位置的小数点应该四舍五入。不需要更改此值即可。 |
pointerEvents | true 要么 false | false | 在某些情况下将其保留为false可能会增加性能，同时删除场景的指针事件 - 例如，链接不可点击 |
除了上面描述的行为，有方法enable()和disable()该激活和去激活所述视差分别实例。
行为：数据属性示例
< DIV ID = “scene”
data-relative-input = “true”
data-clip-relative-input= “false”
data-hover-only= “true”
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 ”
data-origin-x = “ 0.0 ”
data-origin-y = “ 1.0 ”
data-precision = “ 1 ”
data-pointer-events = “ false ” >data-scalar-x = “ 2 ” data-scale-y = “ 8 ” data-friction-x = “ 0.2 ” data-friction-y = “ 0.8 ” data-origin-x = “ 0.0 ” data-origin-y = “ 1.0 ” data-precision = “ 1 ” data-pointer-events = “ false ” >data-scalar-x = “ 2 ” data-scale-y = “ 8 ” data-friction-x = “ 0.2 ” data-friction-y = “ 0.8 ” data-origin-x = “ 0.0 ” data-origin-y = “ 1.0 ” data-precision = “ 1 ” data-pointer-events = “ false ” >=- data-pointer-events = ” false “ >0.8 “ data-origin-x = ” 0.0 “ data-origin-y = ” 1.0 “ data-precision = ” 1 “ data-pointer-events = ” false “ >0.8 “ data-origin-x = ” 0.0 “ data-origin-y = ” 1.0 “ data-precision = ” 1 “ data-pointer-events = ” false “ >
< div class = “ layer ” data-depth = “ 0.00 ” > < img src = “ graphics / layer1.png ” > </ div >
< div class = “ layer ” data-depth = “ 0.20 ” > < img src = “ graphics / layer2.png ” > </ div >
< div class = “ layer ” data-depth = “ 0.40 ” > < img src = “ graphics / layer3.png ” > </ div >
< div class = “ layer ” data-depth = “ 0.60 ” > < img src = “ graphics / layer4.png ” > </ div >
< div class = “ layer ” data-depth = “ 0.80 ” > < img src = “ graphics / layer5.png ” > </ div >
< div class = “ layer ” data-depth = “ 1.00 ” > < img src = “ graphics / layer6.png ” > </ div >
</ div >
行为：构造函数对象示例
var scene = document.getElementById（' scene '）;
VAR Parallax= new Parallax(scene，{
relativeInput ： true，
clipRelativeInput ： false，
hoverOnly ： true，
calibrateX ： false，
calibrateY： true，
invertX ： false，
invertY ： true，
limitX ： false，
limitY： 10，
scalarX ： 2， scalarY： 8，frictionX：0.2，
frictionY： 0.8，
originX ： 0.0，
originY ： 1.0， precision： 1，
pointerEvents ： false
}）;行为：API示例
var scene = document。getElementById（' scene '）;
varParallax= new Parallax（scene）;
parallax.
enable（）;parallax.
disable（）;parallax.
updateLayers（）; //如果您更改其数据深度值parallax.
，则可用于重新绘制场景中的图层。parallax.invert（false，true）;
parallax.limit（false，10）;
parallax.scalar（2，8）;
parallax.friction（0.2，0.8）;
parallax.origin（0.0，1.0）;
parallax.origin（0.0，1.0）;
parallax.origin（0.0，1.0）;
iOS版
如果你正在写一个原生的iOS应用程序，并想用parallax.js内的UIWebView，你需要做的工作一点点让它运行。
UIWebView不再自动接收deviceorientation事件，所以您的本机应用程序必须拦截陀螺仪中的事件并将其重新路由到UIWebView：
- 包括CoreMotion框架
#import <CoreMotion/CoreMotion.h>并创建对UIWebView的引用@property(nonatomic, strong) IBOutlet UIWebView *parallaxWebView; - 将属性添加到应用程序委托（或将拥有UIWebView的控制器）
@property(nonatomic, strong) CMMotionManager *motionManager; - 最后，进行以下调用：
self.motionManager = [[CMMotionManager alloc ] init ];
if（self.motionManager.isGyroAvailable &&！self.motionManager.isGyroActive）{
[ self .motionManager setGyroUpdateInterval：0。5f ]; //设置事件更新频率（以秒计）
[ self .motionManager startGyroUpdatesToQueue：NSOperationQueue .mainQueue
withHandler： ^（CMGyroData * gyroData，NSError * error）{
NSString * js = [ NSString stringWithFormat：@ " allax.onDeviceOrientation（{beta：％f，gamma：％f }）“，gyroData.rotationRate.x，gyroData.rotationRate.y];
[ self .parallaxWebView stringByEvaluatingJavaScriptFromString： js];
}];
}
类似资料：