{Benjamin PREVOT}

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

27 avril 2010 Web 14 commentaires

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
  • 29 avril 2010 à 07h49

    [...] Ce billet était mentionné sur Twitter par Benjamin Prevot. Benjamin Prevot a dit: Créer un effet de slide avec CSS 3 sans JavaScript – http://bit.ly/bogq05 [...]

  • david
    3 novembre 2011 à 21h11

    Bonjour,

    Au fait je retouve tres jolie votre demo mais n’étant pas informaticien, je veux l’utiliser plutot pour mes albumes photo.
    Probleme ce que elle fonctionne pas avec IE8, comment faire ?

    Merci encore

  • 4 novembre 2011 à 23h08

    Bonjour David,

    Le support des transitions est annoncé pour IE10.

    Il n’est pas possible d’utiliser le code ci-dessus pour des versions antérieures.

    En attendant, il faudrait mettre en place cet effet avec du code JavaScript (avec la bibliothèque jQuery par exemple : http://jquery.com/).

    Mais, dans ce cas, on sort du contexte de cet article;-)

  • Chris
    5 février 2012 à 14h14

    Ça ne marche pas dans IE9 non plus :/

  • 5 février 2012 à 16h31

    Bonjour Chris,

    En effet, les propriétés CSS utilisées ne tiennent pas compte de Internet Explorer (quelque soit la version).

    Je n’ai pas trouvé pour le moment de solution pour IE n’utilisant pas de JavaScript.

    Mais je ne manquerai pas de mettre à jour le code si tel était le cas.

  • 16 février 2012 à 16h17

    Bonjour,
    Super sympa, je viens de le mettre sur une de mes rubrique pour tester et cela fait propre, vous pouvez le voir dans la section Youtube…Mais dommage que IE9 n’est pas compatible….
    Merci et à bientôt

  • willy
    28 mars 2012 à 04h50

    Merci Benjamin,ce tuto m’a permis de faire un grand bond .Merci beaucoup.

  • Nicolas
    3 juin 2012 à 15h18

    Bonjour,

    Merci pour ce tutoriel qui marche très bien.

    Cependant, sur Firefox il n’y a pas l’effet de glissement n’est-ce-pas ?

    Car chez moi cela ne marche que sur Safari et Chrome :/

  • Nicolas
    3 juin 2012 à 15h19

    je n’ai rien dit j’avais oublié un tiret pour Moz-transform.

    Merci encore:)

  • 30 décembre 2012 à 15h37

    Bonjour,
    Je ne connaissais pas cette fonction css : tout simplement génial !

    J’utilise aussi une autre fonction très utile pour les pages très longues dont on ne vois plus les menus (top et colomne) dès qu’on descend dans la page est le sidebar-column-fix (pas en css, mais en .js). Avec cette fonction, les menus restent visibles en permanence.

    Merci pour ce partage.

  • 18 juin 2014 à 10h20

    Bonjour!

    Vous avez un effet slide juste au survole de la souris. Mais qu’en est-il d’un slide qui défile seul juste quand on arrive sur le site? Il faut JS; non?
    Un slide tel que dans ce site : http://www.openclassrooms.com

  • 18 juin 2014 à 22h40

    Bonjour B@m92,

    Je n’ai pas étudié le cas.
    Mais, si vous avez des informations, je suis preneur.
    Surtout s’il n’y a pas de JS;-)

  • Camille
    18 septembre 2015 à 14h12

    Bonjour Benjamin,
    Merci beaucoup pour ce tutoriel : il est très bien fait et l’effet est fabuleux !
    Je me demandais, est-il possible d’ajouter une petite image en plus du texte qui est dévoilé par la slide ? Jusqu’à présent mes essais sont malheureusement non-concluants, c’est pourquoi je me tourne vers vous.
    Merci d’avance pour votre réponse,
    Camille.

  • 19 septembre 2015 à 13h32

    Bonjour Camille,

    Il est tout à fait possible de mettre ce que l’on souhaite dans le bloc div (texte, lien, image…).

    Il suffit d’adapter le code en ajoutant une classe à l’image du dessus et de changer le style CSS.

Les avatars utilisés proviennent du site Gravatar. Pour créer un compte, vous pouvez vous inscrire.
* Champs obligatoires