Colorful Rain

by Chan Wu

CSS

.ball {
    background: black;
    border-radius: 50%;
    position: absolute;
}

JavaScript

for (i = 1; i <= 200; ++i) {
    $('body').append('<div class="ball"></div>');
}

function ani() {
    var results = [];
    
    $('.ball').each(function() {
        var ratio = randomRange(20, 30);
        var l = randomRange(0, 600);
        var sec  = randomRange(1000, 4000);
        
        results.push($(this)
            .show()
            .css({
                width: ratio,
                height: ratio,
                top: 0,
                left: l,
                backgroundColor: color()
            })
        .animate({
            top: '+=500px',
            left: '+='+randomRange(1, 100)+'px'
        }, sec)
        .fadeOut());
    });
    
    $.when.apply($, results).done(function() {  
        ani();
    });
}

function color() {
    return 'rgb(' + randomRange(0, 255) + ',' + randomRange(0, 255) + ',' + randomRange(0, 255) + ')';
}

function randomRange(min, max) {
    var min = min || 100;
    var max = max || 100;

    return Math.floor((Math.random() * (max - min + 1))) + min;
}

ani();