Simple parralax with lax.js

parallax.js

// parallax
import lax from 'lax.js';

const PARALLAX_ELEMENTS = document.getElementsByClassName('lax');

document.addEventListener('DOMContentLoaded', function() {
  if (0 < PARALLAX_ELEMENTS.length) {
    lax.init();

    // Add a driver that we use to control our animations
    lax.addDriver('scrollY', function() {
      return window.scrollY;
    });

    // Add animation bindings to elements
    lax.addElements('.lax', {
      scrollY: {
        translateY: [
          ['elInY', 'elCenterY', 'elOutY'],
          {
            576: [0, 0, 0], // no parallax on mobiles
            900: [-20, 0, 20], // small parallax on tablets
            1366: [-60, 0, 60]
          }
        ]
      }
    });
  }
});