JSFiddle - React, Tailwind, and code Playground
CSS
body {
background: #000;
}
.obj {
border-radius: 50%;
opacity: 1;
box-shadow: 0px 0px 15px #fff;
border-radius: 50%;
position: absolute;
background: #fff;
}
JavaScript
$(window).load(function() {
for(i=1; i<500; i++) addPlanet();
});
function mooveItem(item, speed, pos, direction) {
if(isNaN(item.ldir)) item.ldir = pos.min;
if(isNaN(item.tdir)) item.tdir = pos.min;
if(direction == "h") item.ldir = item.ldir == pos.max ? pos.min : pos.max;
if(direction == "v") item.tdir = item.tdir == pos.max ? pos.min : pos.max;
var animation = direction == "v" ? { top : item.tdir } : { left : item.ldir };
item.animate(animation, {
duration : speed,
complete : function() { mooveItem(item, speed, pos, direction); },
queue : false
});
}
function addPlanet() {
var bodyw = $("body").innerWidth();
var bodyh = $(window).height();
var vert = Math.floor(Math.random() * bodyh);
var size = Math.floor(Math.random() * 50);
var speed = size * 1000;
var obj = $("<div>");
obj
.addClass("obj")
.css("left", bodyw / 2)
.css("top", bodyh / 2)
.css("width", size)
.css("height", size);
mooveItem(obj, speed, { min: size * 10, max: bodyw - size * 10 }, "h");
mooveItem(obj, speed, { min: vert, max: vert }, "v");
$("body").append(obj);
}