JSFiddle - React, Tailwind, and code Playground

by StepBaro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<div id="pozadi">
	<div id="container"></div>
</div>

CSS

body{
    margin:0;
    overflow-x: hidden;
  }
  #pozadi{
    background-image: url(img/pozadi.png);
    overflow: hidden;

    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;

    position: relative;
    min-height: 500px;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

JavaScript

if (screen.width > 1200){
  var assets = [
    {url: 'https://openclipart.org/image/2400px/svg_to_png/190850/GrimmReaper.png', x: 0, y: 60, offset: -0.25},
    {url: 'https://openclipart.org/image/2400px/svg_to_png/190850/GrimmReaper.png', x: 200, y: 80, offset: -0.2},
    {url: 'https://openclipart.org/image/2400px/svg_to_png/190850/GrimmReaper.png', x: 300, y: 280, offset: -0.15},
    {url: 'https://openclipart.org/image/2400px/svg_to_png/190850/GrimmReaper.png', x: 400, y: 530, offset: -0.1},
    {url: 'https://maxcdn.icons8.com/Android_L/PNG/512/Sports/medal_third_place-512.png', x: 500, y: 200, offset: -0.1},
    {url: 'https://openclipart.org/image/2400px/svg_to_png/190850/GrimmReaper.png', x: 600, y: 530, offset: 0.01},
    {url: 'http://gallery.yopriceville.com/var/resizes/Free-Clipart-Pictures/Trophy-and-Medals-PNG/First_Place_PNG_Clipart_Image.png?m=1440148642', x: 700, y: 665, offset: 0.01},
  ],
  layers = [],

      w = screen.width,
      h = screen.height,
      loaded = 0,
      container = document.getElementById('container'),
      s = new Snap(w, h);

  container.appendChild(s.node);

  g = s.g();
  c = s.g();
  c.attr({transform: 'scale(1)'});
  g.append(c);

  for (var i = 0; i < assets.length; i++) {
    var img = new Image();
    img.src = assets[i].url;
    img.onload = handle_load;

    

    var _img = s.image(assets[i].url, assets[i].x, assets[i].y);
	/*Start my code*/
    if (i==4) { //3 is your 'img/enf.png', or check the string in img.src 
        _img.click(function(){
            //window.location.href = 'www.debil.cz';
			alert('yeah');
        });
    }
    /*End my code*/
    c.append(_img);
    layers.push(_img);
  }


  function handle_load(e) {
    loaded += 1;

    if (loaded == assets.length) {
      handle_loaded();
    }
  }

  function handle_loaded() {

    container.addEventListener('mousemove', handle_mousemove);
    container.addEventListener('mouseout', handle_mouseout);
    container.addEventListener('mouseover',...