Parallax scrolling/hovering effect. And more.
A standalone Javascript library to make dashing scrolling/hovering effects. Any CSS properties with number values are supported.
npm install perspective.js
# or
yarn add perspective.jsThen in your project
import { Scroll, Hover } from 'perspective.js'
<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
// 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)' }] }] }] })
// 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 }] })
// using npm import { Hover } from 'perspective.js' // using CDN const Hover = perspective.Hover new Hover('#wrap', { max: 400, scale: 1.1, perspective: 500 })
- Mobile support
MIT