Color Boxes Party

HTML
<div class="container" id="host"></div>
SCSS
body { margin: 0; padding: 0; border: 0; overflow: hidden; } .container { background-color: #2b2b2b; height: 100vh; min-width: 100vw; position: relative; } @keyframes intro { 0% { background-color: #2ecc71; } 20% { background-color: #3498db; } 40% { background-color: #9b59b6; } 60% { background-color: #9b59b6; } 80% { background-color: #e74c3c; } 100% { background-color: #f39c12; } } .box { height: 50px; width: 50px; position: absolute; animation: 1s ease-in intro; animation-iteration-count: infinite; background-color: #eeeeee; }
JAVASCRIPT
var initialize = function() { document.getElementById('host').innerHTML = ""; var boxsize = 50; var size = u('.container').size(); var linewidth = Math.ceil(size.width / boxsize); var linecount = Math.ceil(size.height / boxsize); for (var boxnumber = 0; boxnumber < linewidth * linecount; boxnumber++) { var div = document.createElement('div'); div.className = 'box'; div.style.left = '' + boxsize * (boxnumber % linewidth) + 'px'; div.style.top = '' + boxsize * (Math.floor(boxnumber / linewidth)) + 'px'; div.style.animationDelay = '-' + boxnumber * 4 + 'ms'; document.getElementById('host').append(div); } } initialize(); window.addEventListener('resize', initialize);
Expand for more options Login