Create Interactive Parallax Effects Using JavaScript And CSS3 – Perspective.js

Preview:

Description:

Perspective.js is a dependency-free JS library to create interactive parallax effects that react to page scroll and mouse hover/move events.

Installation:

# Yarn
yarn add perspective.js
# NPM
$ npm install perspective.js

Basic usage:

Import the Perspective.js JS library into your web project.

<script src="perspective.js"></script>

The JavaScript to create a parallax scroll effect.

const Scroll = perspective.Scroll
new Scroll('#container', {
    stages: [{
      id: 'basic',
      scrollNumber: 60,
      transition: 0,
      items: [{
        id: 'slow',
        effects: [{
          property: 'transform',
          start: 'translateY(0px)',
          end: 'translateY(-50px)'
        }]
      }, {
        id: 'fast',
        effects: [{
          property: 'transform',
          start: 'translateY(0px)',
          end: 'translateY(-180px)'
        }]
      }]
    }]
})

The JavaScript to create a parallax hover effect.

const Hover = perspective.Hover
new Hover('#container', {
    max: 0,
    scale: 1.1,
    perspective: 500,
    layers: [{
      multiple: 0.1,
      reverseTranslate: true
    }, {
      multiple: 0.3,
      reverseTranslate: true
    }]
})