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

Posted 2020-07-23 健儿须快马

简要教程
　　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属性来指定。

参数	值	描述
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属性举例

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. }               

复制代码