<h1>It was going to be a lonely trip back</h1>
body {
	font-family: 'Anton', sans-serif;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: blue;
}
h1 {
	font-size: 60px;
	max-width: 350px;
	text-transform: uppercase;
	line-height: 60px;
	  mix-blend-mode: multiply;
     z-index:10
}
div {
background-blend-mode: multiply;
	position: absolute;
	 z-index:-1 
}
let title = document.querySelector('h1');
setInterval(() => {
	
	// remove all divs	
	Array.from(document.querySelectorAll('div')).forEach((div) => { div.parentNode.removeChild(div) });
	
	let numberOfDivs = getRandomInt(1, 2);
	let count = 0;
	while (count <= numberOfDivs) {
		let div = document.createElement('div'); 
		let divWidth = getRandomInt(30, 300);
		let divHeight = getRandomInt(30, 300);
		div.style.width = `${divWidth}px`;
		div.style.height = `${divHeight}px`;
		let divTop = getRandomInt(-250, 500);
		let divLeft = getRandomInt(-250, 500);
		div.style.top = `${divTop}px`;
		div.style.left = `${divLeft}px`;
		div.style.background =getRandomcol(0, 3);
		div.style.boxShadow= '10px 20px 10px 10px '+div.style.background;
		title.appendChild(div); 
		let changeTitle = getRandomInt(0, 1) == 1;
		title.style.opacity = changeTitle ? 0.7 : 1;
		title.style.lineHeight = changeTitle ? '65px' : '60px';
		count++;
	}
}, 100);

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


function getRandomcol(min, max) {
    let colAry=['red','yellow','blue','green']
	min = Math.ceil(min);
    max = Math.floor(max);
    return colAry[ Math.floor(Math.random() * (max - min + 1)) + min];
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.