JSFiddle - React, Tailwind, and code Playground

by Terry King

HTML

<div id="fg">
    <div id="ball0" class="ball"><div>
</div>

CSS

.ball {
    position:absolute;
    top:0px;
    left:0px;
    width:100px;
    height:100px;
    background-color:#F00;
    border-radius:50px;
    z-index:3;
}
#fg {
    position:absolute;
    top:50px;
    left:50px;
    width:600px;
    height:400px;
    opacity:1;
    z-index:1;
    overflow:hidden;
}

JavaScript

var count = 50;
var x = new Array(count);
var y = new Array(count);
for (var i = 1; i < count; i++) {
    x[i] = 0;
    y[i] = 0;
    $('#ball0').after('<div id="ball' + i + '" class="ball"><div>');
}

$('#fg').mousemove(function (e) {
    for (var i = count; i > 0; i--) {
        x[i] = x[i - 1]
        y[i] = y[i - 1]
    }
    for (var i = 1; i < count; i++) {
        thisball = $('#ball' + i);
        thisball.css({
            "-webkit-transform": "translate(" + x[i] + "px," + y[i] + "px)"
        });
    }
    x[0] = e.pageX - 50;
    y[0] = e.pageY - 50;
    $('#ball0').css({
        "-webkit-transform": "translate(" + x[0] + "px," + y[0] + "px)"
    });

});