Parallaxjs NPM

parallaxjs

Simple Parallax on DOM elements.

npm.io

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.