Parallax插件使用方法

卷动视差。页面上的元素可以随着鼠标的移动而改变位置，鼠标可视为观察者的视角，元素位置、排列方式会随着视角的改变而改变。本文总结一下Parallax插件的基本用法

1.引入

1.1 CDN

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

将此标签添加到html文件中即可

1.2 下载压缩文件

下载(Release v3.1 · wagerfield/parallax · GitHub)compiled.zip文件（不推荐）

1.3 引入模块

安装

npm i -s parallax-js
yarn add -s parallax-js

使用

import Parallax from 'parallax-js'  or
const Parallax = require('parallax-js')

2.基本用法

（1）安装parallax模块

npm i -s parallax-js
yarn add -s parallax-js

（2）在文件中引入parallax

import Parallax from "parallax-js";

（3）创建节点

<div data-relative-input="true" id="scene">
    <div data-depth="0.2">My first Layer!</div>
    <div data-depth="0.6">My second Layer!</div>
</div>

（4）创建parallax对象

let hi = document.getElementById("scene");
new Parallax(hi);

Parallax.jsx文件总览（此处以React为例）

import * as React from "react";
import Parallax from "parallax-js";
import style from './style.module.css'

export default function ParallaxDemo() {
  React.useEffect(() => {
    let hi = document.getElementById("scene");
    new Parallax(hi);
  }, []);

  return (
    <div data-relative-input="true" id="scene">
      <div className={style.first} data-depth="0.2">My first Layer!</div>
      <div className={style.first} data-depth="0.6">My second Layer!</div>
    </div>
  );
}

style.module.css

.first{
    width: 500px;
    height: 600px;
    line-height: 600px;
    text-align: center;
}

3.配置

3.1 属性配置方法

可通过设置标签中的data-value属性来进行配置，如data-depth。也可通过实例化对象进行配置

• 标签设置属性

<div data-relative-input="true" id="scene">
    //depth深度值越大，相对移动幅度也就越大（深度更深）
  <div data-depth="0.2">My first Layer!</div>
  <div data-depth="0.6">My second Layer!</div>
</div>

• 在对象中设置

var scene = document.getElementById('scene');
// 第二个参数传入配置对象
var parallaxInstance = new Parallax(scene, {
  relativeInput: true
});

• 运行时通过实例化对象配置

parallaxInstance.friction(0.2, 0.2);