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

Category: Animation , Javascript , Recommended | April 7, 2017
Author: Leopoldthecoder
Views Total: 2,566
Official Page: Go to website
Last Update: April 7, 2017
License: MIT

Preview:

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

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
    }]
})

You Might Be Interested In:


Leave a Reply