初识parallax.js Parallax.js简介 Parallax.js是一款功能非常强大的javascript视

Parallax.js简介

Parallax.js是一款功能非常强大的javascript视觉差特效引擎插件。

在网页设计中，parallax 的主要原理就是让多层背景以不同的速度移动，形成立体的运动效果，从而带来出色的视觉体验。

根据鼠标的变化来控制（pc端）

案例：

经典案例：

gitHub （gitHub是一个在线软件源代码托管服务平台）报500时的页面

1.CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/ parallax.min.js"></script>

2.安装并引入

npm i -s parallax-js

import Parallax from "parallax-js";

要初始化视觉差效果，可以选择指定的DOM元素之后，创建一个新的Parallax对象。

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

var parallax = new Parallax(scene);

该视觉差特效的基本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>

每一个层的运动量依赖于3个因素：

计算的公式如下：

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

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

所以在场景中一个data-depth为0.5的层，它的scalarX和scalarY值都为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	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 elementpassed 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