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.jsThen 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
})Roadmap
- Mobile support
Inspirations
License
MIT