https://github.com/leopoldthecoder/perspective
🖼Parallax scrolling effect. And more.
https://github.com/leopoldthecoder/perspective
parallax parallax-javascript-library parallax-scrolling parallax-tilt parallax-translate tilt-effect vanilla-javascript
Last synced: about 2 months ago
JSON representation
🖼Parallax scrolling effect. And more.
- Host: GitHub
- URL: https://github.com/leopoldthecoder/perspective
- Owner: Leopoldthecoder
- License: mit
- Created: 2015-07-07T12:14:56.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2026-01-22T00:45:25.000Z (3 months ago)
- Last Synced: 2026-01-22T13:55:28.221Z (3 months ago)
- Topics: parallax, parallax-javascript-library, parallax-scrolling, parallax-tilt, parallax-translate, tilt-effect, vanilla-javascript
- Language: JavaScript
- Homepage: https://perspective.js.org
- Size: 5.93 MB
- Stars: 85
- Watchers: 2
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Perspective.js
[Documentation](https://perspective.js.org) | [Demo](https://perspective.js.org/examples/)
Parallax scrolling/hovering effect. And more.
## Features
- 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
## Installation
### npm
```shell
npm install perspective.js
# or
pnpm add perspective.js
# or
yarn add perspective.js
```
Then in your project:
```typescript
import { Scroll, Hover } from 'perspective.js'
```
### CDN
```html
```
Once loaded, Perspective.js will register `perspective` to the `window` object, and it has two attributes: `Scroll` and `Hover`.
## Usage
### Parallax scroll
```typescript
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)'
}]
}]
}]
})
```
### Parallax translate
```typescript
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
}]
})
```
### Parallax tilt
```typescript
import { Hover } from 'perspective.js'
new Hover('#wrap', {
max: 400,
scale: 1.1,
perspective: 500
})
```
## Inspirations
- [skrollr](https://github.com/Prinzhorn/skrollr)
- [pressels.com](http://pressels.com/)
- [Tilt.js](https://github.com/gijsroge/tilt.js) and [vanilla-tilt.js](https://github.com/micku7zu/vanilla-tilt.js)
## License
MIT