2.1.0 • Published 3 years ago
parallaxjs v2.1.0
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.
Kind: Exported class
new Parallax(elements, options)
Creates an instance of Parallax.
Param | Type | Description |
---|---|---|
elements | Array.<HTMLElement> | Elements to be transformed. |
options | Options |
Parallax~Direction : "x" | "y"
Parallax direction (x or y).
Kind: inner typedef of Parallax
Parallax~Options : Object
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.