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 ⏏

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.