Parallax.js|强大的javascript视觉差特效引擎

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

查看演示     下载插件

      使用方法

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

1. <ul id="scene">
2. <li class="layer" data-depth="0.00"><img src="layer1.png"></li>
3. <li class="layer" data-depth="0.20"><img src="layer2.png"></li>
4. <li class="layer" data-depth="0.40"><img src="layer3.png"></li>
5. <li class="layer" data-depth="0.60"><img src="layer4.png"></li>
6. <li class="layer" data-depth="0.80"><img src="layer5.png"></li>
7. <li class="layer" data-depth="1.00"><img src="layer6.png"></li>
8. </ul>

复制代码

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

1. var scene = document.getElementById(‘scene‘);
2. var parallax = new Parallax(scene);

复制代码

　　层运动的计算规则

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

• 　　scalarX和scalarY的值
• 　　父DOM元素的尺寸大小
• 　　一个parallax场景中层的depth值

　　计算的公式如下：

1. xMotion = parentElement.width  * (scalarX / 100) * layerDepth
2. yMotion = parentElement.height * (scalarY / 100) * layerDepth

复制代码

　　所以在场景中一个data-depth为0.5的层，它的scalarX和scalarY值都为10(默认值)，它的父容器的尺寸为1000px x 1000px，那么这个层在x和y方向的总运动量就为：

1. xMotion = 1000 * (10 / 100) * 0.5 = 50 # 50px of positive and negative motion in x
2. yMotion = 1000 * (10 / 100) * 0.5 = 50 # 50px of positive and negative motion in y

复制代码

　　配置参数

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

　　Data属性举例

1. <ul id="scene"
2. data-calibrate-x="false"
3. data-calibrate-y="true"
4. data-invert-x="false"
5. data-invert-y="true"
6. data-limit-x="false"
7. data-limit-y="10"
8. data-scalar-x="2"
9. data-scalar-y="8"
10. data-friction-x="0.2"
11. data-friction-y="0.8"
12. data-origin-x="0.0"
13. data-origin-y="1.0">
14. <li class="layer" data-depth="0.00"><img src="graphics/layer1.png"></li>
15. <li class="layer" data-depth="0.20"><img src="graphics/layer2.png"></li>
16. <li class="layer" data-depth="0.40"><img src="graphics/layer3.png"></li>
17. <li class="layer" data-depth="0.60"><img src="graphics/layer4.png"></li>
18. <li class="layer" data-depth="0.80"><img src="graphics/layer5.png"></li>
19. <li class="layer" data-depth="1.00"><img src="graphics/layer6.png"></li>
20. </ul>

复制代码

　　构造函数方式举例

1. var scene = document.getElementById(‘scene‘);
2. var parallax = new Parallax(scene, {
3. calibrateX: false,
4. calibrateY: true,
5. invertX: false,
6. invertY: true,
7. limitX: false,
8. limitY: 10,
9. scalarX: 2,
10. scalarY: 8,
11. frictionX: 0.2,
12. frictionY: 0.8,
13. originX: 0.0,
14. originY: 1.0
15. });

复制代码

　　API示例

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

复制代码

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

1. $(‘#scene‘).parallax();

复制代码

　　带参数：

1. $(‘#scene‘).parallax({
2. calibrateX: false,
3. calibrateY: true,
4. invertX: false,
5. invertY: true,
6. limitX: false,
7. limitY: 10,
8. scalarX: 2,
9. scalarY: 8,
10. frictionX: 0.2,
11. frictionY: 0.8,
12. originX: 0.0,
13. originY: 1.0
14. });

复制代码

　　jQuery API

1. var $scene = $(‘#scene‘).parallax();
2. $scene.parallax(‘enable‘);
3. $scene.parallax(‘disable‘);
4. $scene.parallax(‘updateLayers‘);
5. $scene.parallax(‘calibrate‘, false, true);
6. $scene.parallax(‘invert‘, false, true);
7. $scene.parallax(‘limit‘, false, 10);
8. $scene.parallax(‘scalar‘, 2, 8);
9. $scene.parallax(‘friction‘, 0.2, 0.8);
10. $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;。
• 　　最后使用下面的代码来调用：

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

复制代码