Roll parallax. The position of elements on the page can be changed with the movement of the mouse. The mouse can be regarded as the perspective of the observer, and the position and arrangement of elements will change with the change of the perspective. This article summarizes the basic usage of Parallax plug-in

1. The introduction of

1.1 the CDN

< script SRC = "https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js" > < / script >Copy the code

Add this tag to the HTML file

1.2 Downloading the Compressed File

Download (Release v3.1 · Wagerfield/Parallax · GitHub) Compiled. Zip

1.3 Importing Modules

The installation

npm i -s parallax-js
yarn add -s parallax-js
Copy the code

use

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

2. Basic usage

(1) Install Parallax module

npm i -s parallax-js
yarn add -s parallax-js
Copy the code

(2) Introduce Parallax in the document

import Parallax from "parallax-js";
Copy the code

(3) Create a node

<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>
Copy the code

Create parallax object

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

Parallax.jsx parallax.jsx

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");
    newParallax(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>
  );
}
Copy the code

style.module.css

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

Configuration of 3.

3.1 Attribute Configuration method

You can configure the value by setting the data-value attribute, such as data-depth. It can also be configured by instantiating objects

  • Tag Settings Properties
<div data-relative-input="true" id="scene">
    // The greater the deoth depth, the greater the relative movement (deeper)
  <div data-depth="0.2">My first Layer!</div>
  <div data-depth="0.6">My second Layer!</div>
</div>
Copy the code
  • Set in the object
var scene = document.getElementById('scene');
// The second argument is passed to the configuration object
var parallaxInstance = new Parallax(scene, {
  relativeInput: true
});
Copy the code
  • The runtime instantiates the object configuration
parallaxInstance.friction(0.2.0.2);
Copy the code