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

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

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

本经验分享Parallax.js的使用攻略。

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

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

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

视差场景，请选择您的父DOM元素，并把它传递给视差的构造函数。

var scene = document.getElementById('scene');

var parallax = new Parallax(scene);

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

构造函数对象实例，如下图所示：

API示例如下：

var scene = document.getElementById('scene');

var parallax = new Parallax(scene);

parallax.enable();

parallax.disable();

parallax.calibrate(false, true);

parallax.invert(false, true);

parallax.limit(false, 10);

parallax.scalar(2, 8);

parallax.friction(0.2, 0.8);

使用JQuery如下：

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

运行案例效果，如下图所示：