Parallax.js 功能强大的视觉差特效插件

Question

Parallax.js 是一款功能非常强大的 JavaScript 视觉差特效引擎插件。通过这个视觉差插件可以制作出非常炫酷的视觉差特效。它可以检测智能设备的方向。你可以将它作为 jQuery 插件来使用，也可以以纯 JS 的方式来使用。

使用方法

HTML结构

该视觉差特效的基本HTML结构使用的是一个无序列表，每一个列表项给它们一个class layer和一个data-depth属性来指定该层的深度。深度为0的层将是固定不动的，深度为1的层运动效果最激烈的层。0-1之间的层会根据值来相对移动。

<ul id="scene">
  <li class="layer" data-depth="0.00"><img src="layer1.png"></li>
  <li class="layer" data-depth="0.20"><img src="layer2.png"></li>
  <li class="layer" data-depth="0.40"><img src="layer3.png"></li>
  <li class="layer" data-depth="0.60"><img src="layer4.png"></li>
  <li class="layer" data-depth="0.80"><img src="layer5.png"></li>
  <li class="layer" data-depth="1.00"><img src="layer6.png"></li>
</ul>

初始化插件

要初始化视觉差效果，可以选择指定的DOM元素之后，创建一个新的Parallax对象。

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

层运动的计算规则

每一个层的运动量依赖于3个因素：

• scalarX 和 scalarY 的值
• 父 DOM 元素的尺寸大小
• 一个 parallax 场景中层的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 # 50px of positive and negative motion in x
yMotion = 1000 * (10 / 100) * 0.5 = 50 # 50px of positive and negative motion in y

配置参数

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

参数	值	描述
relativeInput	true 或false	Specifies whether or not to use the coordinate system of the element passed to the parallax constructor. Mouse input only
clipRelativeInput	true 或false	Specifies whether or not to clip the mouse input to the bounds of the element passed to the parallax constructor. Mouse input only
calibrate-x	true 或false	指定是否根据初始时x轴的值来计算运动量
calibrate-y	true 或false	指定是否根据初始时y轴的值来计算运动量
invert-x	true 或false	设置为true则按反方向运动层
invert-y	true 或false	设置为true则按反方向运动层
limit-x	number 或false	x方向上总的运动量数值范围，设置为false则允许层自由运动
limit-y	number 或false	y方向上总的运动量数值范围，设置为false则允许层自由运动
scalar-x	number	输入的运动量和这个值相乘，增加或减少层运动的灵敏度
scalar-y	number	输入的运动量和这个值相乘，增加或减少层运动的灵敏度
friction-x	number 0-1	层运动的摩擦量，实际上是在层上添加一些easing效果
friction-y	number 0-1	层运动的摩擦量，实际上是在层上添加一些easing效果
origin-x	number	鼠标输入的x原点，默认值是0.5。0会移动原点到页面的左边，1会移动原点到页面的右边。Mouse input only
origin-y	number	鼠标输入的x原点，默认值是0.5。0会移动原点到页面的上边，1会移动原点到页面的下边。Mouse input only

Data 属性举例

<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"
  data-origin-x="0.0"
  data-origin-y="1.0">
  <li class="layer" data-depth="0.00"><img src="graphics/layer1.png"></li>
  <li class="layer" data-depth="0.20"><img src="graphics/layer2.png"></li>
  <li class="layer" data-depth="0.40"><img src="graphics/layer3.png"></li>
  <li class="layer" data-depth="0.60"><img src="graphics/layer4.png"></li>
  <li class="layer" data-depth="0.80"><img src="graphics/layer5.png"></li>
  <li class="layer" data-depth="1.00"><img src="graphics/layer6.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,
  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);

作为 jQuery 插件使用

如果你将 Parallax.js 作为 jQuery 或 Zepto 插件来使用，可以如下方式使用：

$('#scene').parallax();

带参数：

$('#scene').parallax({
  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
});

jQuery API

var $scene = $('#scene').parallax();
$scene.parallax('enable');
$scene.parallax('disable');
$scene.parallax('updateLayers');
$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);
$scene.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];
  }];
}

相关链接

在线示例：http://matthew.wagerfield.com/parallax/