Simple Parallax on DOM elements.
npm install parallaxjs
<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());
- Parallax
- Parallax ⏏
- new Parallax(elements, options)
- ~Direction :
"x"
|"y"
- ~Options :
Object
- Parallax ⏏
Simple Parallax on DOM elements.
Creates an instance of Parallax.
Param | Type | Description |
---|---|---|
elements | Array.<HTMLElement> |
Elements to be transformed. |
options | Options |
Parallax direction (x or y).
Kind: inner typedef of Parallax
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. |
MIT. See license file.