24
JUIN

Afficher une image progressivement avec jQuery et du CSS

Publié le 24/06/09 à 07h27 par DJo

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

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:

Créer 3 images de cette manière

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

Baraguiné par Orni le 24/06/09 à 09h15
Orni sur La Ferme du Web
J'en pense que Flash est bientôt mort pour les petites animations sympa avec des masques ^__^
Baraguiné par ipatate le 24/06/09 à 09h29
ipatate sur La Ferme du Web
@Orni désolé je suis pas trop d'accord avec toi, avec flash c'est le genre de truc que tu fais en 10".
Quand tu peux le faire en javascript c'est bien, mais parfois le faire en flash fait gagner beaucoup de temps...
Baraguiné par HammHetfield le 24/06/09 à 11h28
HammHetfield sur La Ferme du Web
Et faut perdre autant en accessibilité ! Le concept est très sympa et bien réalisé, disons que ça peut être pratique pour une utilisation particulière quoi mais en tout cas c'est une bonne chose, et encore un fois, JS approche des possibilités de Flash !

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web