网页鼠标移动JavaScript视觉差特效引擎插件：Parallax.js

Parallax.js是一款功能非常强大的javascript视觉差特效引擎插件，主要原理就是让多层背景以不同的速度移动，形成立体的运动效果，从而带来出色的视觉体验。通过插件可以给网页制作出非常有逼格的视觉差效果。它可以检测设备的方向和鼠标的移动位置来对dom进行偏移处理。你可以将它作为jQuery插件来使用，也可以以纯JS的方式来使用。如果你在学习前端开发想做出一款炫酷的网页，不妨了解一下这款插件。

特效演示

在线演示：点我直达

使用教程

HTML结构如下：

<div id="scene">
  <div data-depth="0.2"><img src="url" /></div>
  <div data-depth="0.6"><img src="url" /></div>
</div>

每个 Parallax.js 实例都需要一个容器元素来识别，这里我们使用id="scene"，场景下的子元素都会成为移动对象。

将移动对象设置data-depth属性来指定该层的深度。深度为0的层将是固定不动的，深度为1的层运动效果最激烈的层。

Javascript结构如下：

var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene);

初始化这个函数，将id传入就正式启动了。

配置参数

下面是一些可用的配置参数，这些参数也可以在HTML标签中使用data属性来指定。

data属性应该放在id容器上，例如：

<div id="scene"
  data-cadivbrate-x="false"
  data-cadivbrate-y="true"
  data-invert-x="false"
  data-invert-y="true"
  data-divmit-x="false"
  data-divmit-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">
  <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, {
  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
});    

API示例

var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
parallax.enable();
parallax.disable();
// Useful for reparsing the layers in your scene if you change their data-depth value
parallax.updateLayers(); 
parallax.calibrate(false, true);
parallax.invert(false, true);
parallax.limit(false, 10);
parallax.scalar(2, 8);
parallax.friction(0.2, 0.8);
parallax.origin(0.0, 1.0); 

　IOS

如果如果你编写了一个原生的iOS项目，并希望在UIWebView中使用parallax.js，你需要按下面的步骤来实现它。

UIWebView不会再自动接收deviceorientation事件，所以你的项目必须拦截gyroscope和reroute发出的事件。

引入CoreMotion框架，#import ，并创建一个UIWebView的引用 @property(nonatomic, strong) IBOutlet UIWebView *parallaxWebView;

在app delegate中添加一个属性@property(nonatomic, strong) CMMotionManager *motionManager;

最后使用下面的代码来调用：

self.motionManager = [[CMMotionManager alloc] init];
if (self.motionManager.isGyroAvailable && !self.motionManager.isGyroActive) {
  [self.motionManager setGyroUpdateInterval:0.5f]; // Set the event update frequency (in seconds)
  [self.motionManager startGyroUpdatesToQueue:NSOperationQueue.mainQueue
                                  withHandler:^(CMGyroData *gyroData, NSError *error) {
    NSString *js = [NSString stringWithFormat:@"parallax.onDeviceOrientation({beta:%f, gamma:%f})", gyroData.rotationRate.x, gyroData.rotationRate.y];
    [self.parallaxWebView stringByEvaluatingJavaScriptFromString:js];
  }];
}          

更多使用及兼容等问题请访问下方Github开源地址阅读文档。

开源地址

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