JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<div class="wrapper">
<div class="man-frames">

</div>
</div>

CSS

.wrapper {
  width: 500px;
  height: 500px;
  position: relative;
  overflow: hidden;
  background: #FFF;
}
.wrapper.red {
  background: #F00;
}
.man-frames {
  width:100px;
  height: 100px;
  overflow: hidden;
  background: url('//fallbacks.carbonads.com/nosvn/fallbacks/30dcff356ccb9811b84d4c2ebedb24df.png');
  position: absolute;
}

JavaScript

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

var $frame = $('.man-frames'),
    frames = [
        {default: {top: 30, left: -150}, animate: {left: 0}},
        {default: {top: '50%', left: -150}, animate: {left: 0}},
        {default: {left: -150, bottom: 10}, animate: {left: 0}},
        {default: {top: -150, right: 0, left: 'auto', transform: 'rotate(90deg)'}, animate: {top: 0}},
        {default: {bottom: 0, right: -150, left: 'auto', transform: 'rotate(-180deg)'}, animate: {right: 0}},
        {default: {bottom: '50%', right: -150, left: 'auto', transform: 'rotate(-180deg)'}, animate: {right: 0}},
        {default: {left: '50%', top: -150, transform: 'rotate(90deg)'}, animate: {top: 0}},
        {default: {left: '20%', bottom: -150, transform: 'rotate(-90deg)'}, animate: {bottom: 0}},
        {default: {left: '60%', bottom: -150, transform: 'rotate(-90deg)'}, animate: {bottom: 0}}
    ];

$(window).on("focus blur", function (e) {
    var prevType = $(this).data("prevType");

    if (prevType != e.type) {   //  reduce double fire issues
        switch (e.type) {
            case "focus":
                console.log('Активна');
                $('.wrapper').removeClass('red');
                interval = setInterval(function () {
                    var frame = frames[getRandomInt(0, frames.length - 1)];
                    $frame
                        .removeAttr('style')
                        .css(frame.default)
                        .animate(frame.animate, 200, function () {
                            setTimeout(function () {
                                $frame.animate(frame.default);
                            }, 1000);
                        });
                }, 3000);
                break;
            case "blur":
                console.log('Не активна');
                $('.wrapper').addClass('red');
                clearInterval(interval);
                break;
       ...