Perspective.js
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
CDN
Once loaded, Perspective.js will register perspective
to the window
object, and it has two attributes: Scroll
and Hover
Usage
Parallax scroll
// using npm // using CDNconst Scroll = perspectiveScroll '#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 // using CDNconst Hover = perspectiveHover '#wrap' max: 0 scale: 11 perspective: 500 layers: multiple: 01 reverseTranslate: true multiple: 03 reverseTranslate: true
Parallax tilt
// using npm // using CDNconst Hover = perspectiveHover '#wrap' max: 400 scale: 11 perspective: 500
Roadmap
- Mobile support
Inspirations
License
MIT