Parallax scrolling/hovering effect. And more.
- Parallax scroll, parallax tilt and parallax translate effects
- Any CSS properties with number values are supported
- Written in TypeScript with full type definitions
- Zero runtime dependencies
npm install perspective.js
# or
pnpm add perspective.js
# or
yarn add perspective.jsThen in your project:
import { Scroll, Hover } from 'perspective.js'<script src="https://unpkg.com/perspective.js/dist/perspective.umd.js"></script>Once loaded, Perspective.js will register perspective to the window object, and it has two attributes: Scroll and Hover.
import { Scroll } from 'perspective.js'
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)'
}]
}]
}]
})import { Hover } from 'perspective.js'
new Hover('#wrap', {
max: 0,
scale: 1.1,
perspective: 500,
layers: [{
multiple: 0.1,
reverseTranslate: true
}, {
multiple: 0.3,
reverseTranslate: true
}]
})import { Hover } from 'perspective.js'
new Hover('#wrap', {
max: 400,
scale: 1.1,
perspective: 500
})MIT