JSFiddle - React, Tailwind, and code Playground

HTML

<div>

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

CSS

body { background: red; }

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

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+10+'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;
		}
})();
// ---