Principes de base
Ces boîtes coulissantes dynamiques reposent sur le même principe de base. La balise DIV avec ".boxgrid" agit comme une fenêtre après avoir transmis les deux autres éléments de l'objet dans lequel vous souhaitez "regarder". Vous n'êtes pas sûr ? Laissez cette image vous donner un indice :
Après avoir compris ce principe de base, nous pouvons utiliser l'effet d'animation d'éléments coulissants pour découvrir ou recouvrir la zone à afficher afin de créer un effet coulissant.
Cliquez pour prévisualiser l'effet Téléchargez les fichiers sources de cet exemple
Première étape – Bases CSS
Dans le diagramme d'inspiration ci-dessus qui donne la structure de base, nous devons utiliser un peu de CSS pour lui faire afficher l'effet souhaité. Le CSS suivant définit la fenêtre de visualisation (.boxgrid) et définit la POSITION par défaut de l'image en GAUCHE et en HAUT, ce qui est très important pour les explications qui se chevauchent lors du glissement. Et n'oubliez pas que overflow:hidden rendra cela possible.
.boxgrid{
largeur : 325 px ;
hauteur : 260px ;
marge : 10 px ;
flotteur : gauche ;
arrière-plan : #161613 ;
bordure : solide 2px #8399AF ;
débordement : caché ;
position : relative ;
}
.boxgrid img{
position : absolue ;
haut : 0 ;
gauche : 0 ;
bordure : 0 ;
}
Si vous n'êtes pas prêt à utiliser CSS pour obtenir une description translucide, vous pouvez passer directement à la deuxième étape :
.boxcaption{
flotteur : gauche ;
position : absolue ;
arrière-plan : #000 ;
hauteur : 100px ;
largeur : 100 % ;
opacité : 0,8 ;
/* Pour Internet Explorer 5-7 */
filtre : progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* Pour Internet Explorer 8 */
-MS-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)" ;
}
Maintenant, nous devons définir le point de départ par défaut pour la zone de légende (je pense que les calques valent mieux que les boîtes). Si vous souhaitez qu'il soit complètement masqué lors de l'initialisation, vous devrez définir TOP et LEFT sur la hauteur et la largeur de votre fenêtre (.boxgrid), qui (bien sûr) sont déterminées par la direction dans laquelle vous souhaitez glisser. Vous pouvez également lui faire en afficher seulement une partie lors de l'initialisation, comme indiqué par ces .caption et .boxcaption (définis par CSS) :
.captionfull .boxcaption {
haut : 260 ;
gauche : 0 ;
}
.caption .boxcaption {
haut : 220 ;
gauche : 0 ;
}
Source : Joyeux Favoris