Afficher une image progressivement avec jQuery et du CSS

Voici un script jQuery permettant de réaliser un effet sympathique: Chargement progressif d'une image, façon loader Flash.

Ce script présenté par buildinternet.com utilise uniquement de Javascript (jQuery) et du CSS pour créer un effet de remplissage progressif d'une image.

Pour mieux vous rendre compte de l'effet, jettez un coup d'oeil sur la démo.

Si vous souhaitez, à votre tour, réaliser cet effet, vous aurez besoin de préparer votre image sous photoshop et créer 3 couches comme ceci:

Une fois que c'est fait, utilisez le HTML suivant:

<div id="dude">
 <div id="dudecontainer">
    <div class="frame">
      <img src="dudeframe.png"/>
    </div>
    <div id="dudeoverlay">
       <div id="dudeblock">&nbsp;</div>
       <div id="dudeedge">&nbsp;</div>
    </div>
    <img src="dude.jpg"/>
 </div>
</div>

Combiné à ce CSS:

*{
margin:0;
padding:0;
}
body {
text-align: center;
background: #A4CAEF;
text-align: center;
padding: 20px;
}
/*Container for the image frame aka the top image*/
.frame{
position: absolute;
z-index: 2;
}
/*The container the character goes in for easy placement*/
#dude{
height: 575px;
width: 300px;
margin: 0px auto;
}
/*Adds padding around image to make border. Needed only for pngs.*/
img.loadpic{
margin: 10px;
}
/*Prevents spillover from middle layer moving up*/
#dudecontainer{
position: relative;
overflow: hidden;
height: 575px;
width: 300px;
background: #FFF;
}
/*The middle layer container, hiding base image initially*/
#dudeoverlay{
position: absolute;
z-index: 1;
}
/*White div in #dudeoverlay that fill space the edge image doesn't*/
#dudeblock{
height: 625px;
width: 300px;
background: #FFF;
}
/*Image that adds effect the fill, in this case slanted*/
#dudeedge{
height: 90px;
width: 300px;
background: url('slash.png');
}

Le tout animé grâce à ce Javascript (Après avoir chargé jQuery dans votre page):

$(document).ready(function() {
 $("#dudeoverlay").stop().animate({top:'-665px'},{queue:false,duration:3500} );
});

C'est pas compliqué, mais il fallait avoir l'idée ! L'effet pourra servir à créer vos propres loaders graphiques Ajax par exemple.

Qu'en pensez-vous ?

Site Officiel