轻量级的的视差引擎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个因素：

1. 的scalarX和scalarY值（参见行为下面的配置）
2. 父DOM元素的尺寸
3. 所述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 '）;
var

Parallax=  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：

1. 包括CoreMotion框架#import 并创建对UIWebView的引用 @property(nonatomic, strong) IBOutlet UIWebView *parallaxWebView;
2. 将属性添加到应用程序委托（或将拥有UIWebView的控制器）@property(nonatomic, strong) CMMotionManager *motionManager;
3. 最后，进行以下调用：

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];
  }];
}