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

最新推荐文章于 2024-04-14 09:52:21 发布

刘二蛋儿

最新推荐文章于 2024-04-14 09:52:21 发布

阅读量4.5k

点赞数 1

分类专栏：视差插件文章标签：库

视差插件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

建立

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