@liaoys/parallax v1.0.1

@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

Element's Attributes

Instance properties

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}`);
});