Lightweight Parallax Scroll Engine In Vanilla JavaScript – MagicParallax

MagicParallax is a lightweight JavaScript library that applies the familiar Parallax effect to any relative positioned element based on the window’s current scroll position.

Basic usage:

Insert the JavaScript file magic-parallax.js into your webpage.

<script src="js/magic-parallax.js"></script>

Use HTML5 data- attributes to config the parallax scrolling behavior for each element as this:

<h1
    data-parallax   = "true"
    data-limit      = "true"
    data-start-x    = "0.5"
    data-end-x      = "0.5"
    data-start-y    = "0.5"
    data-end-y      = "0.9"
    data-mid-x      = "0.5"
    data-mid-y      = "0.5">Hello World
</h1>

Initialize the MagicParallax and done.

document.addEventListener('readystatechange', function() {
  if (document.readyState === "complete") {
    // Initiate parallax
    var p = new Parallax();
    p.init();
  }
});