多语言展示
当前在线:1158今日阅读:112今日分享:19

轻量级视差引擎Parallax.js使用攻略

Parallax.js 是一个简单的,轻量级的的视差引擎,能够对智能设备的方向作出反应。在没有没有陀螺仪或运动检测硬件可用的时候,使用光标的位置来代替。有很多的行为,你就可以设置为任何给定的视差实例。这些行为既可以通过在标记中指定的数据属性或通过构造函数 和 JavaScript API 调用。       本经验分享Parallax.js的使用攻略。
工具/原料
1

笔记本电脑或是台式机

2

互联网

3

JQuery

4

Parallax.js

方法/步骤
1

在GitHub上下载Parallax.js,如下图所示。

2

解压parallax-master.zip文件,工程目录如下图所示。

3

只需创建一个列表,给每个项目要内移动您的视差场景一类层和数据深度属性指定场景内的深度的元素。深度0,将导致层保持静止,深度为1,将导致层移动至所计算的运动的总效应。值插图中0和1,会造成层移动相对于所提供的比例。

4

视差场景,请选择您的父DOM元素,并把它传递给视差的构造函数。var scene = document.getElementById('scene');var parallax = new Parallax(scene);

5

案例增加数据属性,如下图所示。

6

构造函数对象实例,如下图所示:

8

使用JQuery如下:

9

jQuery API如下所示:var $scene = $('#scene').parallax();$scene.parallax('enable');$scene.parallax('disable');$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);

10

Parallax.js | jQuery Example

11

运行案例效果,如下图所示:

注意事项

可以使用JQuery,也可以不使用JQuery,但是很明显使用JQuery可以简化代码

推荐信息