JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div id="vs-section" class="vs-section">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
  <div class="fourth"></div>
  <div class="fifth"></div>
  <div class="sixth"></div>
</div>

SCSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.vs-section {
  div {
    height: 100vh;
  }
  .first {
    background: #ffcb11;
  }
  .second {
    background: #ff3411;
  }
  .third {
    background: #ffcb11;
  }
  .fourth {
    background: #ff1211;
  }
  .fifth {
    background: #ffee11;
  }
  .sixth {
    background-color: #ffca11;
    background-image: url(https://assets.website-files.com/5ce7d8a34a11c3cc57face08/5d26f04b1443e06ec1cc54a6_globe.png);
    background-size: cover;
    background-attachment: fixed;
    background-position: 100% 100%;
  }
}

JavaScript

(function() {

  // Scroll Variables (tweakable)
  var defaultOptions = {

    // Scrolling Core
    frameRate: 1, // [Hz]
    animationTime: 600, // [ms]
    stepSize: 120, // [px]

    // Pulse (less tweakable)
    // ratio of "tail" to "acceleration"
    pulseAlgorithm: true,
    pulseScale: 4,
    pulseNormalize: 1,

    // Acceleration
    accelerationDelta: 120, // 50
    accelerationMax: 3, // 3

    // Keyboard Settings
    keyboardSupport: true, // option
    arrowScroll: 120, // [px]

    // Other
    touchpadSupport: true, // ignore touchpad by default
    fixedBackground: true,
    excluded: ''
  };

  var options = defaultOptions;



  // Other Variables
  var isExcluded = false;
  var isFrame = false;
  var direction = {
    x: 0,
    y: 0
  };
  var initDone = false;
  var root = document.documentElement;
  var activeElement;
  var observer;
  var deltaBuffer = [120, 120, 120];

  var key = {
    left: 37,
    up: 38,
    right: 39,
    down: 40,
    spacebar: 32,
    pageup: 33,
    pagedown: 34,
    end: 35,
    home: 36
  };


  /***********************************************
   * SETTINGS
   ***********************************************/

  var options = defaultOptions;


  /***********************************************
   * INITIALIZE
   ***********************************************/

  /**
   * Tests if smooth scrolling is allowed. Shuts down everything if not.
   */
  function initTest() {

    var disableKeyboard = false;

    // disable keyboard support if anything above requested it
    if (disableKeyboard) {
      removeEvent("keydown", keydown);
    }

    if (options.keyboardSupport && !disableKeyboard) {
      addEvent("keydown", keydown);
    }
  }

  /**
   * Sets up scrolls array, determines if frames are involved.
   */
  function init() {

    if (!document.body) return;

    var body = document.body;
    var html = document.documentElement;
    var windowHeight = window.innerHeight;
    var scrollHeight =...