JSFiddle - React, Tailwind, and code Playground

by gion_13

HTML

<a href="#">start</a>
<a href="#">stop</a>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

CSS

div{
    width : 50px;
    height : 50px;
    background-color : red;
    position : absolute;
    top : 50%;
    -moz-border-radius : 25px;
    -webkit-border-radius : 25px;
    border-radius : 25px;
    z-index : 0;
}

JavaScript

var defazaj = 200;

function initAnimation(el) {
    el.param = 2;
    el.pace = 0.1;
    el.delay = 30;
    el.amplitude = 50;
    el.latestColor = el.style.backgroundColor;
    var originalPos = $(el).offset();
    el.toggleColor = function(color) {
        var c = color || 'blue';
        if (el.latestColor != el.style.backgroundColor) {
            var aux = el.style.backgroundColor;
            el.style.backgroundColor = el.latestColor;
            el.latestColor = aux;
        }
        else {
            el.latestColor = el.style.backgroundColor;
            el.style.backgroundColor = c;
        }

    }
    el.getNextPos = function() {
        var o = $(el).offset();
        //o.left += Math.sin(el.param);
        o.left += el.pace * el.amplitude;
        var exTop = o.top;
        o.top = originalPos.top + Math.cos(el.param) * el.amplitude;
        if(o.top > exTop)
            el.style.zIndex = 1;
        else
            el.style.zIndex = -1;
        if (o.left > $(window).width()) {
            o.left = 0;
            el.toggleColor();
        }
        else if (o.left < 0) {
            o.left = $(window).width();
            el.toggleColor();
        }
        if (o.top > $(window).height()) {
            o.top = 0;
            el.toggleColor();
        }
        else if (o.top < 0) {
            o.top = $(window).height();
            el.toggleColor();
        }
        return o;
    }
    el.timeoutFunction = function() {
        el.param += el.pace;
        $(el).offset(el.getNextPos());
    }
    el.start = function() {
        el.interval = setInterval(el.timeoutFunction, el.delay);
    }
    el.stop = function() {
        clearInterval(el.interval);
    }

}


$('a:contains(start)').click(function() {
    $('div').each(function(i, el) {
        if (typeof el.stop == 'function') el.stop();
        initAnimation(el);
        setTimeout(function() {
            el.start();
        }, i * defazaj);
   ...