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 <CoreMotion/CoreMotion.h>
,并创建一个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]; }]; }
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!