❤
npm
Sign UpSign In

perspective.js

1.0.0 • Public • Published

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

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i perspective.js

Repository

github.com/Leopoldthecoder/Perspective.js

Homepage

github.com/Leopoldthecoder/Perspective.js#readme

Weekly Downloads

56

Version

1.0.0

License

MIT

Last publish

Collaborators

  • yi.yang
Try on RunKit
Report malware