Parallax scrolling effect. And more.

Package: perspective.js

Created by: Leopoldthecoder

Last modified: Thu, 23 Jun 2022 19:05:24 GMT

Version: 1.0.0

License: MIT

Downloads: 260

Repository: https://github.com/Leopoldthecoder/Perspective.js

Install

npm install perspective.js

yarn add perspective.js

Perspective.js

Documentation

Demo

Parallax scrolling/hovering effect. And more.

Features

A standalone Javascript library to make dashing scrolling/hovering effects. Any CSS properties with number values are supported.

Installation

npm

 npm install perspective.js
# or
yarn add perspective.js

Then in your project

 import { Scroll, Hover } from 'perspective.js'

CDN

 <script type="text/javascript" src="//unpkg.com/perspective.js/lib/perspective.js"></script>

Once loaded, Perspective.js will register perspective to the window object, and it has two attributes: Scroll and Hover

Usage

Parallax scroll

 // using npm
import { Scroll } from 'perspective.js'

// using CDN
const Scroll = perspective.Scroll

new Scroll('#wrap', {
  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)'
      }]
    }]
  }]
})

Parallax translate

 // using npm
import { Hover } from 'perspective.js'

// using CDN
const Hover = perspective.Hover

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

Parallax tilt

 // using npm
import { Hover } from 'perspective.js'

// using CDN
const Hover = perspective.Hover

new Hover('#wrap', {
  max: 400,
  scale: 1.1,
  perspective: 500
})