Créer un effet de slide avec CSS 3 sans JavaScript
Table des matières
Préparation de la structure HTML Déclaration du style CSS Ajout de l’effet Slide

Créer un effet de slide avec CSS 3 sans JavaScript

Web CSS

Nous avons souvent vu des librairies JavaScript permettant de réaliser des effets de slide :

Avec les nouvelles spécifications CSS 3, il est maintenant possible de mettre en place cet effet facilement sans aucun code JavaScript.

Nous allons voir comment mettre en place un effet identique à ceci : http://www.incg.nl/blog/2008/hover-block-jquery/.

Préparation de la structure HTML

Nous allons tout d’abord mettre en place un bloc global contenant nos éléments glissants :

<div id="slides">...</div>

Chaque élément glissant sera de la forme suivante :

<div>
  <p>Mon texte</p>
  <img alt="Mon image" src="chemin/image.jpg" />
</div>

Déclaration du style CSS

La structure est maintenant créée, il faut définir le style permettant de positionner l’image au dessus du texte et ajouter l’effet souhaité.

Pour cela, nous appliquons d’abord un style au bloc.

#slides div {
  background: #fff;
  height: 225px; /* Égal à la hauteur de l'image */
  margin: 10px;
  overflow: hidden;
  position: relative;
  width: 300px; /* Égal à la largeur de l'image */
}

La taille du bloc doit être identique à celle de l’image.

Il faut maintenant positionner l’image au dessus du texte, pour cela, nous utilisons un positionnement absolu.

#slides div img {
  left: 0;
  position: absolute;
  top: 0;
}

Ajout de l’effet Slide

Nous allons maintenant définir l’effet de glissement au passage du curseur sur le bloc.

Pour cela, les nouvelles propriétés CSS 3 vont nous aider.

#slides div:hover img {
  transform: translateY(-225px); /* Valeur négative égale à la hauteur de l'image */
  -moz-transform: translateY(-225px);
  -o-transform: translateY(-225px);
  -webkit-transform: translateY(-225px);
}

Ce code permet d’appliquer un nouveau comportement à l’image lorsque le curseur de la souris se positionne au dessus du bloc (div:hover).

Pour plus de détails sur la propriété transform, vous pouvez vous référer à l’adresse suivante : http://www.w3.org/TR/css3-2d-transforms/.

Comme vous l’avez remarqué, certaines propriétés commencent pas -moz, -o et -webkit ; cela permet aux différents navigateurs (Firefox, Opera et Safari) d’interpréter ces données.

Si l’on teste ce code, nous avons bien une image positionnée au dessus du texte, mais aucun effet au passage du curseur.

Pour cela, il faut modifier la partie div img comme ci-dessous :

#slides div img {
  left: 0;
  position: absolute;
  top: 0;
  transition: transform 0.5s ease-in-out;
  -moz-transition: -moz-transform 0.5s ease-in-out;
  -o-transition: -o-transform 0.5s ease-in-out;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
}

Nous avons ajouté un effet de transition.

Ainsi, nous indiquons que la propriété pour laquelle il y aura un effet est transform (voir le bloc CSS div:hover img), cet effet s’étendra sur 0,5 seconde et utilisera la fonction de calcul ease-in-out.

Pour plus de détails, vous pouvez vous référer au site du W3C : http://www.w3.org/TR/css3-transitions/.

En testant ce code, nous obtenons un glissement vers le haut lorsque le curseur entre dans le bloc, l’image dévoile ainsi le texte.

Comme vous le voyez, aucun code JavaScript n’a été utilisé pour mettre en place un effet de glissement.

L’inconvénient de cette méthode est qu’elle n’est applicable que pour les navigateurs supportant les propriétés de transformation 2D et les transitions définies par CSS 3.

Il est bien entendu possible de réaliser des glissements dans les directions que l’on souhaite, pour cela, vous pouvez vous reporter à la démonstration ci-dessous.

Démo