便宜vps推荐
搬瓦工优惠|主机测评网!

网页鼠标移动JavaScript视觉差特效引擎插件:Parallax.js

Parallax.js是一款功能非常强大的javascript视觉差特效引擎插件,主要原理就是让多层背景以不同的速度移动,形成立体的运动效果,从而带来出色的视觉体验。通过插件可以给网页制作出非常有逼格的视觉差效果。它可以检测设备的方向和鼠标的移动位置来对dom进行偏移处理。你可以将它作为jQuery插件来使用,也可以以纯JS的方式来使用。如果你在学习前端开发想做出一款炫酷的网页,不妨了解一下这款插件。

特效演示

在线演示:点我直达

使用教程

HTML结构如下:

<div id="scene">
  <div data-depth="0.2"><img src="url" /></div>
  <div data-depth="0.6"><img src="url" /></div>
</div>

每个 Parallax.js 实例都需要一个容器元素来识别,这里我们使用id="scene",场景下的子元素都会成为移动对象。

将移动对象设置data-depth属性来指定该层的深度。深度为0的层将是固定不动的,深度为1的层运动效果最激烈的层。

Javascript结构如下:

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

初始化这个函数,将id传入就正式启动了。

配置参数

下面是一些可用的配置参数,这些参数也可以在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属性应该放在id容器上,例如:

<div id="scene"
  data-cadivbrate-x="false"
  data-cadivbrate-y="true"
  data-invert-x="false"
  data-invert-y="true"
  data-divmit-x="false"
  data-divmit-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">
  <div class="layer" data-depth="0.00"><img src="graphics/layer1.png"></div>
  <div class="layer" data-depth="0.20"><img src="graphics/layer2.png"></div>
  <div class="layer" data-depth="0.40"><img src="graphics/layer3.png"></div>
  <div class="layer" data-depth="0.60"><img src="graphics/layer4.png"></div>
  <div class="layer" data-depth="0.80"><img src="graphics/layer5.png"></div>
  <div class="layer" data-depth="1.00"><img src="graphics/layer6.png"></div>
</div>               

构造函数方式举例

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); 

 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];
  }];
}          

更多使用及兼容等问题请访问下方Github开源地址阅读文档。

开源地址

Github地址:https://github.com/wagerfield/parallax

 

赞(16)
未经允许不得转载:雪花测评 » 网页鼠标移动JavaScript视觉差特效引擎插件:Parallax.js

推荐使用迅马数据云服务器建站,性价比高:点我进入

登录

找回密码

注册