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
})

Roadmap

• Mobile support

Inspirations

• skrollr
• pressels.com
• Tilt.js and vanilla-tilt.js

License

MIT