JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<svg id="products" style="background-color: #0e0727" viewbox="0 0 1920 5760" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      #products .cls-1,
      #products .cls-10,
      #products .cls-14,
      #products .cls-15,
      #products .cls-16,
      #products .cls-17,
      #products .cls-18,
      #products .cls-19,
      #products .cls-2,
      #products .cls-20,
      #products .cls-22,
      #products .cls-3,
      #products .cls-7,
      #products .cls-9 {
        fill: none
      }

      #products .cls-1,
      #products .cls-2,
      #products .cls-3 {
        stroke: #38324e
      }

      #products .cls-1,
      #products .cls-10,
      #products .cls-18,
      #products .cls-20,
      #products .cls-22,
      #products .cls-25,
      #products .cls-8,
      #products .cls-9 {
        stroke-width: 2px
      }

      #products .cls-3,
      #products .cls-7 {
        stroke-width: 3px
      }

      #products .cls-4 {
        fill: #3bbb88
      }

      #products .cls-5 {
        fill: #139362
      }

      #products .cls-6 {
        fill: #44daa1
      }

      #products .cls-7 {
        stroke: #312c45
      }

      #products .cls-11,
      #products .cls-21,
      #products .cls-25,
      #products .cls-8 {
        fill: #0e0727
      }

      #products .cls-10,
      #products .cls-18,
      #products .cls-20,
      #products .cls-8 {
        stroke: #45dca2
      }

      #products .cls-22,
      #products .cls-25,
      #products .cls-9 {
        stroke: #44daa1
      }

      #products .cls-10,
      #products .cls-9 {
        stroke-dasharray: 6
      }

      #products .cls-12 {
        fill: #3e3953
      }

      #products .cls-13 {
        fill: #38324e
      }

      #products .cls-14,
      #products .cls-15,
      #products .cls-16 {
        stroke: #3e3953;
        stroke-miterlimit: 10
      }

      #products .cls-14,
      #products .cls-15 {
        stroke-width: 36px
     ...

SCSS

nav {
  display: block;
  position: fixed;
  top: 0px;
  width: 100%;
  left: 0;
  right: 0;
  background: black;

  ul {
    display: flex;

    li {
      padding: 20px;

      a {
        display: block;
        line-height: 20px;
      }
    }
  }
}

#website-navigator { transition: all 0.25s ease-in-out; overflow: visible;}
#website-navigator.scrollUp { top: -200px;}

JavaScript

var scroll = new SmoothScroll(document, 50, 12);


var target = (document.scrollingElement || document.documentElement || document.body.parentNode || document.body);
var pos = target.scrollTop;

function SmoothScroll(target, speed, smooth) {
  if (target === document) {
    target = (document.scrollingElement || document.documentElement || document.body.parentNode || document.body);
  }
  var moving = false;
  var frame = target === document.body && document.documentElement ? document.documentElement : target;

  target.addEventListener('mousewheel', scrolled, {
    passive: false
  });
  target.addEventListener('DOMMouseScroll', scrolled, {
    passive: false
  });
  target.addEventListener('scroll', scrolled, {
    passive: false
  });

  function scrolled(e) {
    e.preventDefault();
    var delta = normalizeWheelDelta(e);
    pos += -delta * speed;
    pos = Math.max(0, Math.min(pos, target.scrollHeight - frame.clientHeight)); // limit scrolling
    if (!moving) {
      update();
    }
  }

  function normalizeWheelDelta(e) {
    if (e.detail) {
      if (e.wheelDelta) {
        return e.wheelDelta / e.detail / 40 * (e.detail > 0 ? 1 : -1) // Opera else
      } else {
        return -e.detail / 3 // Firefox
      }
    } else {
      return e.wheelDelta / 120 // IE,Safari,Chrome
    }
  }

  function update() {
    moving = true;

    var delta = (pos - target.scrollTop) / smooth;
    target.scrollTop += delta;

    if (Math.abs(delta) > 0.5) {
      requestFrame(update);
    } else {
      moving = false;
    }
  }

  var requestFrame = function() { // requestAnimationFrame cross browser
    return (window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(func) {
      window.setTimeout(func, 400 / 10);
    });
  }()
}

// get document dependencies
var menu = document.getElementById('website-navigator'),
     win = window, 
		 doc =...