JSFiddle - React, Tailwind, and code Playground

by pleinx

HTML

<link rel="stylesheet" href="https://www.thomann.de/static/tr/css/style.css">
<link rel="stylesheet" href="https://www.thomann.de/static/tr/css/legacy.css">
<body itemscope="" itemtype="http://schema.org/WebPage" class="lr-everything-centered responsive" cz-shortcut-listen="true">

<div class="thomann-page thomann-page-de">
  <div class="thomann-page-content-wrapper">
<div class="rs-header">
<div class="snow"><canvas id="canvas"></canvas></div>
<!--tr-rndr:Navi/StaticLinks-->
 <ul class="staticlinks"> <li class="menu"><a class="menu-link" href="https://www.thomann.de/de/index.html">Menü</a> <div class="flyout main-view"> <div class="inner"> <ul class="primary-menu"> <li class="start"><a href="https://www.thomann.de/de/index.html" data-link="">Startseite</a></li> <li class="aboutthomann"><a data-for-class="aboutthomann" href="https://www.thomann.de/de/compinfo.html">Infos über Thomann</a></li> <li class="helpdesk"><a data-for-class="helpdesk" href="https://www.thomann.de/de/helpdesk.html">Service-Bereich</a></li> <li class="service"><a data-for-class="service" href="https://www.thomann.de/de/helpdesk_service.html">Service</a></li> <li class="departments"><a data-for-class="departments" href="https://www.thomann.de/de/helpdesk_repair.html">Unsere Fachabteilungen</a></li> <li class="thomannuniverse"><a data-for-class="thomannuniverse" href="https://www.thomann.de/de/compinfo_thomannuniverse.html">Noch mehr Thomann</a> </li> </ul> <ul class="secondary-menu">  <li class="aboutthomann"> <ul> <li class="back"><span class="label"><svg class="rs-icon rs-icon-chevron-left"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/icons/icons.svg?v=31#chevron-left"></use></svg>zurück</span></li>  <li><a href="https://www.thomann.de/de/compinfo.html">Angenehm, Thomann</a></li>  <li><a href="https://www.thomann.de/de/thomannexclusive.html">Thomann Exklusiv-Marken</a></li>  <li><a href="https://www.thomann.de/de/compinfo_route.html">Wegbeschreibung zu...

SCSS

body, html {
  width: 100%;
  height: 100%;
}

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
}

.header {
  background: #272727;
  padding: 10px;
  position: relative;
  height: 130px;
  
  img {
    max-width: 100%;
    height: auto;
    min-height: 45px;
  }
  
  .logo {
    margin: 0 auto 20px;
    max-width: 250px;    
  }
  
  .rs-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    width: calc(100% - 20px);
    left: 10px;
    bottom: 10px;
    
    &.centered {
      bottom: 20px;    
    }
  }
  
  .part {
    font-size: 0;
  }
  
  .search {
    background: linear-gradient(to left, rgba(23, 23, 23, 0) 0%, #171717 15px);
    padding-right: 15px;
  }
  
  .entrypoints {
    width: 100%;
    overflow: hidden;
    
    > ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      white-space: nowrap;
      display: flex;
      justify-content: center;
      overflow: hidden;
      max-width: 100%;
      margin: 0 auto;
      
      > li {
        padding: 0 5px;
        float: left;
        
        > a {
          font-size: 18px;
          color: #fff;
          text-decoration: none;
        }
      }
    }
  }
  
  .navigation {
    background: linear-gradient(to right, rgba(23, 23, 23, 0) 0%, #171717 15px);
    padding-left: 15px;
  }
}

.tshop {
  min-height: 500px;
  background: #ccc;
  padding: 5%;
  
  h1 {
    margin-top: 0;
  }
}

.tr-tooltip {
  display: none;
}

.snow {
    overflow: hidden;
    height: calc(100% - 40px);
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

.rs-searchbox {
  top: -15px;
}

canvas{
    position:absolute;
    top:0;
    left:0;
}

JavaScript

(function() {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {
        window.setTimeout(callback, 1000 / 60);
    };
    window.requestAnimationFrame = requestAnimationFrame;
})();


var flakes = [],
    canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    flakeCount = 400,
    mX = -100,
    mY = -100

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

function snow() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (var i = 0; i < flakeCount; i++) {
        var flake = flakes[i],
            x = mX,
            y = mY,
            minDist = 150,
            x2 = flake.x,
            y2 = flake.y;

        var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),
            dx = x2 - x,
            dy = y2 - y;

        if (dist < minDist) {
            var force = minDist / (dist * dist),
                xcomp = (x - x2) / dist,
                ycomp = (y - y2) / dist,
                deltaV = force / 2;

            flake.velX -= deltaV * xcomp;
            flake.velY -= deltaV * ycomp;

        } else {
            flake.velX *= .98;
            if (flake.velY <= flake.speed) {
                flake.velY = flake.speed
            }
            flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
        }

        ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")";
        flake.y += flake.velY;
        flake.x += flake.velX;
            
        if (flake.y >= canvas.height || flake.y <= 0) {
            reset(flake);
        }


        if (flake.x >= canvas.width || flake.x <= 0) {
            reset(flake);
        }

        ctx.beginPath();
        ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);
        ctx.fill();
    }
    requestAnimationFrame(snow);
};

function reset(flake) {
    flake.x =...