jQuery插件-Parallax.js强大的Javascript视觉差特效引擎

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个因素:

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

计算的公式如下:

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

所以在场景中一个data-depth为0.5的层,它的scalarXscalarY值都为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 truefalse Specifies whether or not to use the coordinate system of the element passed to the parallax constructor. Mouse input only
clipRelativeInput truefalse 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 truefalse 指定是否根据初始时x轴的值来计算运动量
calibrate-y truefalse 指定是否根据初始时y轴的值来计算运动量
invert-x truefalse 设置为true则按反方向运动层
invert-y truefalse 设置为true则按反方向运动层
limit-x numberfalse x方向上总的运动量数值范围,设置为false则允许层自由运动
limit-y numberfalse 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];
  }];
}               

在线预览 网盘下载

郑重声明:

1 本资源来源于互联网,资源的版权归资源原作者所持有,受《中华人民共和国著作权法》等相关法律保护。

2 由于无法和原作者取得联系,所以上传的部分资源无法先通过原作者的同意就分享给大家了,如本资源侵犯了您(原作者)的权益,请联系我们(微信号 xiaohaimei1989),我们会立马删除您的资源,并向您表达诚挚的歉意!

3 本站是一个公益型网站,分享资源的目的在于传播知识,分享知识,收取一点点打赏的辛苦费是用于网站的日常运营开支,并非用于商业用途。

4 本站资源只提供学习和参考研究使用,使用过后请在第一时间内删除。本站不承担资源被单位或个人商用带来的法律责任。

发表评论