parallaxjs

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.