Performant Parallax Scrolling Library – SimpleParallax

Preview:

Description:

A lightweight, fast JavaScript library that enables smooth, high-performance parallax scrolling effects on DOM elements using CSS3 transforms and requestAnimationFrame API.

Installation:

$ npm install SimpleParallax

How to use it:

Load the minified version of the SimpleParallax library for faster page loading.

<script src="/path/to/SimpleParallax.min.js"></script>

Define an array of element objects containing target elements and animation speed.

var elements = [
    {
      element: document.getElementById('section1'),
      speed: 1
    },
    {
      element: document.getElementById('section2'),
      speed: 0.2
    },
    {
      element: document.getElementById('section3'),
      speed: 2.5
    }
];

Active the parallax scrolling effect on the elements you specify.

var parallax = new SimpleParallax(elements);