JSFiddle - React, Tailwind, and code Playground

by ozzon91

HTML

<div>

</div>
<span id="topor"></span>
<audio src="http://mail.r13.org/i/die.mp3" autoplay loop></audio>

CSS

body {
  <audio src="http://mail.r13.org/i/die.mp3" autoplay loop></audio> background: red;
}

#topor {
  background: url("http://mail.r13.org/i/topor.png");
  display: block;
  position: absolute;
  width: 218px;
  height: 191px;
  z-index: 99999;
}

div {
  background: #000;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 4000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 4000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 4000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}


/* supermen */

.supermen {
  width: 140px;
  height: 370px;
  position: absolute;
  z-index: 99999;
  left: -400px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.super_back {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}


/* /end supermen */

@-ms-keyframes spin {
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

JavaScript

// --- supermen flying
(function() {
  $(document).on('mousemove', function(e) {
    $('#topor').css({
      top: e.clientY - 100 + 'px',
      left: e.clientX - 100 + 'px'
    });
  });

  var timesGo = [2000, 3000, 1000, 500, 1500, 1100, 3000, 1000, 1000, 1200, 3000, 3000, 1000, 500, 1000];

  for (var k = 0; k < 8; k++) {

    (function(k) {

      var $img = $('<img>', {
        'class': 'supermen',
        'alt': "super",
        'style': 'cursor: pointer'
      });

      $('div').append($img);

      $img.css({
        top: getRandomInt(100, 200) * k + 'px',
        left: -getRandomInt(80, 400) + 'px'
      });

      var $voise = $('<audio>', {
        'id': 'voise'
      });

      $voise.on('loadedmetadata', function() {
        $img.click(function() {
          $voise.get(0).currentTime = 0;;
          $voise.get(0).play();

          $img.css('top', $img.position().top - 30 + 'px');
        });
      });

      $voise.attr('src', 'http://mail.r13.org/im/a.mp3');

      $img.on('load', function() {




        setTimeout(goMen, timesGo[getRandomInt(0, timesGo.length)]);

        function goMen() {
          $('.supermen').animate({
            'left': $(window).width() + getRandomInt(200, 300) + 'px'
          }, timesGo[getRandomInt(0, timesGo.length)], function() {
            $(this).addClass('super_back');
            $(this).animate({
              'left': -getRandomInt(140, 400) + 'px'
            }, timesGo[getRandomInt(0, timesGo.length)], function() {
              $(this).removeClass('super_back');
              setTimeout(goMen, timesGo[getRandomInt(0, timesGo.length)]);
            });
          });
        }

      });

      $img.attr('src', "http://mail.r13.org/im/super.png").appendTo('html');

    })(k);

  }

  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
  }
})();
// ---