Le principe général▲
Toutes ces animations de boîtes coulissantes fonctionnent selon le même principe : des balises div (.boxgrid dans le CSS) qui se comportent comme des fenêtres dans lesquelles se positionnent deux autres éléments.
Cela ne vous semble pas très clair ? Regardez le schéma suivant qui est plus parlant :
À partir de cette idée de base, nous pouvons créer des effets pour l'élément coulissant qui découvrira ou masquera l'élément fixe.
Les fondations : CSS▲
Étant donné la structure décrite sur l'image ci-dessus, nous aurons besoin d'une base en CSS pour permettre de faire fonctionner l'ensemble correctement.
Le code suivant est le minimum fonctionnel, retrouvez l'ensemble du code CSS dans l'archive téléchargeable.
Le code suivant définit les fenêtres de visualisation (.boxgrid) et positionne les images par rapport à leurs bords supérieurs gauches. Il est important de gérer le chevauchement pendant l'animation. Rappelez-vous que c'est le overflow: hidden; qui s'en charge.
.boxgrid{
width: 325px;
height: 260px;
margin:10px;
float:left;
background:#161613;
border: solid 2px #8399AF;
overflow: hidden;
position: relative;
}
.boxgrid img{
position: absolute;
top: 0;
left: 0;
border: 0;
}Si vous ne souhaitez pas utiliser de transparence pour les légendes, c'en est fini pour les CSS, vous pouvez passer à l'étape suivante.
.boxcaption{
float: left;
position: absolute;
background: #000;
height: 100px;
width: 100%;
opacity: .8;
/* Pour IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* Pour IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}Maintenant, nous allons définir les positions initiales pour les légendes. Si vous souhaitez que la boîte soit entièrement cachée initialement, vous devrez définir la distance aux bords haut et gauche égale aux hauteur et largeur de la fenêtre (.boxgrid), en fonction du sens dans lequel se fera l'animation. Vous pouvez aussi rendre la légende partiellement visible par défaut, comme le montrent les classes .caption et .boxcaption.
.captionfull .boxcaption {
top: 260;
left: 0;
}
.caption .boxcaption {
top: 220;
left: 0;
}Ajouter les animations▲
À ce stade, c'est à vous de choisir quelle animation vous désirez. J'en ai créé différentes par défaut, mais vous pouvez vous amuser à créer les vôtres et à nous les proposer dans les commentaires de cet article.
$(document).ready(function(){
// Pour changer la direction vers le haut / bas ou droite / gauche, ajoutez un "-" devant les propriétés top ou left
//Glissement vertical
$('.boxgrid.slidedown').hover(function(){
$(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
});
//Glissement horizontal
$('.boxgrid.slideright').hover(function(){
$(".cover", this).stop().animate({left:'325px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
});
//Glissement diagonal
$('.boxgrid.thecombo').hover(function(){
$(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
});
//Glissement partiel (montre juste une partie du fond)
$('.boxgrid.peek').hover(function(){
$(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
});
//Glissement total (de caché à visible)
$('.boxgrid.captionfull').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
});
//Glissement de légende (partiellement caché à visible)
$('.boxgrid.caption').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
});
});La structure HTML▲
Il y a quelques classes que nous avons utilisées uniquement comme sélecteur jQuery. Gardez ces quelques règles à l'esprit :
- la classe .cover sert à tout élément glissant ;
- dans les div .boxgrid, les images doivent venir en premier.
Voici un exemple utilisé pour l'animation de la classe .captionfull :
<div class="boxgrid captionfull">
<img src="jareck.jpg"/>
<div class="cover boxcaption">
<h3>Jarek Kubicki</h3>
<p>Artist<br/><a href="<a class="linkification-ext" title="Linkification: http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/" href="http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/">http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/</a>" target="_BLANK">More Work</a></p>
</div>
</div>Allez de l'avant : créez !▲
Vous pouvez voir les différents exemples proposés.
Je ne vous ai montré que quelques options possibles : ces boîtes ne sont que des bases. Maintenant, c'est à vous de créer vos animations ! Je vous encourage à télécharger l'archive contenant les exemples afin de copier / coller la partie de code commune et de créer et partager vos créations sur le lien ci-après.
Commentez 
Remerciements▲
Un grand merci à MetalGeek pour sa relecture avisée !