CSS animated fill

CSS and HTML animating fill background.

by William Green

HTML

<div id="projectContainer">
    <div id="stripeContainer"></div>
</div>

CSS

/*Created by William Green (15) in California
Email [email protected] with questions or comments.*/
 #projectContainer {
    background-color:#ddd;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
html, body {
    margin:0;
    padding:0;
}
#stripeContainer {
    display:table;
    height:100%;
    margin:auto;
}
.stripe {
    width:40px;
    display:inline-block;
    margin-bottom:-4px;
    -moz-transition:all 3s ease;
    -o-transition:all 3s ease;
    -ms-transition:all 3s ease;
    -webkit-transition:all 3s ease;
    transition:all 3s ease;
}

JavaScript

window.onload = function () {
    var stripeContainer = document.getElementById('stripeContainer');
    var colors = ['#7ADAFA', '#FFA587', '#FF6161', '#eee', '#333', '#36D172', '#0BC4E0'];
    reset();
    window.onresize = function () {
        reset();
    };

    function reset() {
        stripeContainer.innerHTML = '';
        var horizontalStripes = Math.floor(window.innerWidth / 40);
        for (var i = 0; i != horizontalStripes; i++) {
            var stripe = document.createElement('div');
            stripe.className = 'stripe';
            stripe.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
            stripeContainer.appendChild(stripe);
            animateStripe(stripe, i);
        }
        //stripe.style.height = '100%';
        function animateStripe(stripe, i) {
            window.setTimeout(function () {
                stripe.style.height = '100%';
            }, 500 * i);
            stripe.style.height = '0%';
        }
    }
};