Animação Postal Natal

Bug na animação devido a bolas que aparecem fora de lugar consoante a resolução do ecrã.

by Salustiano Silva

HTML

<img src="https://db.tt/b8pEExYH" width="100%" height="100%" alt="background" id="bg" />

<div id="balls">
	<img src="https://db.tt/7cdekTFC" width="100" height="194" alt="bola" />
	<img src="https://db.tt/RwsA4X0D" width="30" height="58" alt="bola" />
	<img src="https://db.tt/QmubwfsI" width="70" height="136" alt="bola" />
	<img src="https://db.tt/g19T38O0" width="100" height="194" alt="bola" />
	<img src="https://db.tt/EoMHAZYk" width="70" height="136" alt="bola" />
	<img src="https://db.tt/GwaORyO0" width="100" height="194" alt="bola" />
	<img src="https://db.tt/Q9iTJRFQ" width="30" height="58" alt="bola" />
	<img src="https://db.tt/QmubwfsI" width="70" height="136" alt="bola" />
	<img src="https://db.tt/qFvk2xsI" width="40" height="78" alt="bola" />
	<img src="https://db.tt/lSFzswly" width="100" height="194" alt="bola" />
	<img src="https://db.tt/DsR2dbCQ" width="70" height="136" alt="bola" />
	<img src="https://db.tt/RwsA4X0D" width="30" height="58" alt="bola" />
	<img src="https://db.tt/GwaORyO0" width="100" height="194" alt="bola" />
	<img src="https://db.tt/Q9iTJRFQ" width="30" height="58" alt="bola" />
	<img src="https://db.tt/QmubwfsI" width="70" height="136" alt="bola" />
	<img src="https://db.tt/lSFzswly" width="100" height="194" alt="bola" />
	<img src="https://db.tt/RwsA4X0D" width="30" height="58" alt="bola" />
	<img src="https://db.tt/DsR2dbCQ" width="70" height="136" alt="bola" />
	<img src="https://db.tt/7cdekTFC" width="100" height="194" alt="bola" />
	<img src="https://db.tt/Q9iTJRFQ" width="30" height="58" alt="bola" />
	<img src="https://db.tt/EoMHAZYk" width="70" height="136" alt="bola" />
</div>

CSS

body {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    overflow:hidden;
}
#bg {
    position:absolute;
    width:100%;
    height:100%;
}
#balls {
    position:absolute;
    top:-10px;
    left:0px;
    right:0px;
    z-index:2;
    overflow:hidden;
    height:194px;
}
#balls > img {
    float:left;
    margin-left:28px;
}

JavaScript

// prepare balls
$('#balls img').each(function(){
    $(this).css({
        "opacity" :  0,
        "top"     : "-" + $(this).height() + "px"
    });
});

// animate balls
function gimeBalls(){
    
    $("#balls img:not('.done'):first").animate({
        "opacity" : 1,
        "top"     : 0
    }, 400, function() {
        $(this).addClass("done");
    });
}

setInterval(gimeBalls, 400);