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);
