Parallax.js–自适应智能设备方向的视差引擎

大家好,我是程序视点室 的小二哥!今天小二哥给大家分享一款功能非常强大的javascript视觉差特效引擎插件：Parallax.js。

Parallax.js简介

Parallax.js是一个简单的，轻量级的 视差引擎。你可以将它作为作为jQuery或Zepto插件来使用，也可以以纯JS的方式来使用。

最-最-最厉害的是它可以对智能设备的方向作出反应，即使在没有陀螺仪或运动检测硬件可用的时候，也可使用光标的位置来代替。

首先肯定是先引入JS库。有三种方法： 1）使用CDN

复制代码

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

下载最新版本的ZIP包，解压获得parallax.js和parallax.min.js。用其中一个就好。3）npm依赖安装

npm i -s parallax-js 复制代码

再根据你喜欢的工作流程要求导入库

import Parallax from 'parallax-js' or 复制代码

const Parallax = require('parallax-js')

每个Parallax.js实例都需要一个Dom元素，我们称为场景。让我们任意定义一个。

复制代码

</div>

场景中的每个子元素都可以成为移动目标。我们先来最简单的。

复制代码

  <div>My first Layer!</div>  
  <div>My second Layer!</div>  
</div>

在视差场景中移动的每个项目的类别layer和data-depth指定其在场景中的深度的属性。深度0 ，将导致层保持静止。深度1，将使层通过所计算出的运动的总效果移动。0和1之间的值将导致图层相对于提供的比例移动一个量。