html-element-animate

dj.js

function addStyleLink(url) {
	let link = document.createElement('link');
	link.rel = 'stylesheet';
	link.href = url;
	const head = document.getElementsByTagName('head')[0];
	head.appendChild(link);
}

function addClass(elements, clsNames) {
	for (let e of elements) {
		for (let cls of clsNames) {
			e.classList.add(cls)
		}
	}
}

function removeClass(elements, clsNames) {
	for (let e of elements) {
		for (let cls of clsNames) {
			e.classList.remove(cls)
		}
	}
}

function randomChoose(items) {
	return items[Math.floor(Math.random() * items.length)];
}

function getRandomItems(items, n=10) {
	let lst = [];
	n = Math.min(items.length, n);

	for (let i = 0; i < n; i++) {
		while (true) {
			let item = randomChoose(items);
			if (lst.includes(item)) {
				continue;
			} else {
				lst.push(item);
				break;
			}
		}
	}

	return lst;
}

function main() {
	const animateUrl = 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css';
	const animateClsList = [
		"animated", "bounce", "flush", "pulse", "rubberBand", "shake",
		"swing", "tada", "wobble", "jello", "flip", "flipInX", "flipInY",
		"hinge", "rollIn",
	]
	addStyleLink(animateUrl);

	const divs = Array.from(document.querySelectorAll('div')).splice(0, 12);
	const elementSize = 12;
	let lastElements = [];

	while (true) {
		if (divs.length == 0) {
			break;
		}
		let elements = divs.splice(0, elementSize);
		lastElements = elements;
		elements = elements.concat(
			getRandomItems(lastElements, Math.floor(lastElements.length / 2))
		);

		for (let e of elements) {
			let cls = getRandomItems(animateClsList, 2);
			console.log(Date() + 'addClass(' + [e] + ', ' + cls + ')');
			addClass([e], cls);
			setTimeout(() => {
				console.log(Date() + 'removeClass(' + [e] + ', ' + cls + ')');
				removeClass([e], cls);
			}, 15500);
		}
	}
}

function startDJ() {
	for (let i = 0; i < 2; i++) {
		main();
	}
}

startDJ();