@liaoys/parallax

A JavaScript library that makes parallax animations for a website.It effects for any elements and any css style that has number value.

example1

---

example2

---

See example

Installation

npm install @liaoys/parallax

Usage

<div id="parallax-container">
    <div class="parallax-element"
         parallax-start-style="transform: translate(0,0)"
         parallax-end-style="transform: translate(100px,0)"
    >element1</div>
    <div class="parallax-element"
         parallax-start-style="transform: translate(0,0)"
         parallax-end-style="transform: translate(-100px,0)"
    >element2</div>
    <div class="parallax-element"
         parallax-start-style="opacity:1"
         parallax-end-style="opacity:0"
    >element3</div>
</div>

import Parallax from "@liaoys/parallax";

const parallax = new Parallax({
  container: '#parallax-container',
  startTop: 200,
  endTop: 0,
})

In the example above, when the "parallax-container" scrolls from the top 100 of the viewport to 0:

"element1" will move 100px to the right

"element2" will move 100px to the left

"element1" will transition from opaque to transparent

See example

Types

Type: Parallax

Instance of class Parallax

Type: ParallaxSelector

string | HTMLElement | Array<HTMLElement> | ArrayLike<HTMLElement>

Be use for select an element

Options

Name	Type	Default	Description
container	ParallaxSelector		Parallax container. Required by default
elements	ParallaxSelector	.parallax-element	Animation elements
elementAttrPrefix	string	parallax	Animation Element's attribute prefix
startTop	number	0	The distance of the container from the top of the viewport at the beginning of animation
endTop	number	500	The distance of the container from the top of the viewport at the end of animation
scrollElement	ParallaxSelector	document	If page's scroll element is not Document Object, use this option to specify a new
customProgress	boolean	false	Enable "customProgress" mode. In this mode, the animation progress will not base on scroll. It need to call the 'update' method to set(see example). The options container, startTop and endTop will be invalid
on	object		Add event listener

Element's Attributes

Name	Default	Description
parallax-start-style		The style of animation start
parallax-end-style		The style of animation end
parallax-start-progress	0	The progress of animation start
parallax-end-progress	1	The progress of animation end

Instance properties

| Name | Type | | Description | | ---- | ---- | ---- | | container | HTMLElement | Parallax container | | options | object | Parallax initial options | | progress | number | current progress of the Parallax animation |

Instance methods

update(progress?: number, triggerProgressEvent = false): Parallax

• progress Animation progress. By default, progress will calculate automatic by the distance of the container from the top of the viewport.
• triggerProgressEvent Trigger the event Named progress

on(eventName: string, listener: () => void): Parallax

• eventName The name of the event
• listener The callback function

Add event listener

Events

Parallax comes with a bunch of useful events you can listen. Events can be assigned in two ways:

1.Using on options on parallax initialization:

const parallax = new Parallax( {
  // ...
  on: {
    init: function () {
      console.log('parallax initialized');
    },
  },
});

2.Using on method after parallax initialization.

const parallax = new Parallax({
  // ...
});
parallax.on('progress', function (parallax, progress) {
  console.log(`The current progress is ${progress}`);
});

Name	Arguments	Description
init	(parallax: Parallax)	Event will be trigger after a initialization
progress	(parallax: Parallax, progress: number)	Event will be trigger when Parallax progress is changed. Argument progress is always from 0 to 1