README
parallaxjs
Simple Parallax on DOM elements.
Installation
npm install parallaxjs
Usage
<div class="layer" data-parallax-speed="3">Parallax layer</div>
<div class="layer" data-parallax-speed="1.5">Other layer that moves faster</div>
import Parallax from "parallaxjs";
const parallax = new Parallax(document.querySelectorAll(".layer"));
// Add parallax handlers to your own listeners (so that you can debounced them or whatever)
window.addEventListener("scroll", () => parallax.onScroll());
window.addEventListener("resize", () => parallax.onResize());
API
Parallax
- Parallax
- Parallax ⏏
- new Parallax(elements, options)
- ~Direction :
"x"
|"y"
- ~Options :
Object
- Parallax ⏏
Parallax ⏏
Simple Parallax on DOM elements.
new Parallax(elements, options)
Creates an instance of Parallax.
Param | Type | Description |
---|---|---|
elements | Array.<HTMLElement> |
Elements to be transformed. |
options | Options |
"x"
| "y"
Parallax~Direction : Parallax direction (x or y).
Kind: inner typedef of Parallax
Object
Parallax~Options : Kind: inner typedef of Parallax
Properties
Name | Type | Default | Description |
---|---|---|---|
[speed] | number |
1 |
Parallax relative speed. |
[offset] | number |
0.5 |
Offset (0 to 1) relative to window height. |
[heightOffset] | number |
0 |
Offset (0 to 1) relative to element height. |
[direction] | Direction |
"y" |
Parallax direction. |
[min] | number |
-Infinity |
Minimum translation. |
[max] | number |
Infinity |
Maximum translation. |
[background] | boolean |
false |
Apply parallax to background position instead of transform. |
License
MIT. See license file.