Smooth Responsive Parallax Scrolling Library For The Web – Parallax-Scroller

Parallax-Scroller is a lightweight JavaScript library for creating smooth, responsive parallax scrolling effects on web pages.

How to use it:

1. Install and import the Parallax-Scroller.

# Yarn
$ yarn @grokku/parallax-scroller
# NPM
$ npm i @grokku/parallax-scroller

import { init, destroy } from "@grokku/parallax-scroller";

2. Initialize the Parallax-Scroller. If no root element is specified, the document body is used by default.

init({
  root: document.getElementById("example"),
});

3. Apply CSS animations to the target parallax elements. Maintain consistent styling across all keyframes to ensure smooth transitions. Remember, inline styles will be overwritten by data-[PERCENTAGE]p attributes during animation

<span 
    data-scroll="demo" 
    data-0p="transform:scale(-5, 5) rotate(0deg); opacity: 0.9"
    data-10p="transform: scale(-5, 5) rotate(0deg); opacity: 1"
    data-25p="transform: scale(-10, 10) rotate(0deg); opacity: 1"
    data-35p="transform: scale(-10, 10) rotate(0deg); opacity: 1"
    data-40p="transform: scale(-7.5, 7.5) rotate(0deg); opacity: 1"
    data-45p="transform: scale(-5, 5) rotate(0deg); opacity: 0.9"
    data-50p="transform: scale(-5, 5) rotate(0deg); opacity: 0.9"
    data-70p="transform: scale(-6, 6) rotate(0deg); opacity: 0.9"
    data-75p="transform: scale(-6, 6) rotate(-20deg); opacity: 0.9"
    data-80p="transform: scale(-6, 6) rotate(0deg); opacity: 0.9"
    data-85p="transform: scale(-6, 6) rotate(20deg); opacity: 0.9"
    data-95p="transform: scale(-8, 8) rotate(0deg); opacity: 0.9"
    data-112p="transform: scale(-6, 6) rotate(-320deg); opacity: 0.8"
    data-118p="transform: scale(-6, 6) rotate(-380deg); opacity: 0.8"
    data-130p="transform: scale(-5, 5) rotate(-400deg); opacity: 0.7"
    data-200p="transform: scale(-1, 1) rotate(-320deg); opacity: 0.7">
  ...
</span>

4. You can also create parallax scrolling effect using scroll events as follows:

const bubble = document.getElementById("parallax-element");
init({
  root: document.getElementById("demo-root"),
  listener: ({ name, checkpoint, stage }) => {
    if (name === "copter") {
      bubble.innerHTML = "";
      if (stage === "scrollForward") {
        switch (checkpoint) {
          case 10:
            bubble.innerHTML = "Let's detour around the cloud ahead!";
            break;
          case 45:
          case 50:
            bubble.innerHTML =
              "We're just gonna have to go through the cloud. ";
            break;
          case 70:
            bubble.innerHTML = "Go under!";
            break;
          case 95:
            bubble.innerHTML = "Let's salto over it!";
            break;
          case 130:
            bubble.innerHTML = "Landing to mountains.";
            break;
        }
      } else if (stage === "scrollBackward" && checkpoint > 0) {
        bubble.innerHTML = "Rewind...";
      }
      if (bubble.innerHTML === "") {
        bubble.style.display = "none";
      } else {
        bubble.style.display = "block";
      }
    }
  },
});

Changelog:

11/28/2023

• JS update