JSFiddle - React, Tailwind, and code Playground
JavaScript
var textArray = [
"wow",
"so amaze",
"much hunt",
"such treasure"];
var divCount = 1;
var collageCount = 1;
function makeDiv(){
var divsize = ((Math.random()*100) + 50).toFixed();
var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
$newdiv = $('<div class="collage popup-' + divCount + '"/>').css({
'width':divsize+'px',
'height':divsize+'px',
// 'background-color': color
});
var randomWord = textArray[ (Math.floor(Math.random() * textArray.length)) ]
var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
$newdiv.text(randomWord).css({
'position':'absolute',
'left':posx+'px',
'top':posy+'px',
'display':'none',
'color' : color
}).appendTo( 'body' ).fadeIn(100).delay(300).fadeOut(5000, function(){
makeDiv();
});
divCount++;
}
makeDiv();
function removeDiv(){
$(".popup-" + collageCount + "").fadeOut(300, function() { $(this).remove(); });
collageCount++;
};
setInterval(function () {
removeDiv(); // show next div
}, 10 * 1000);