Utilisez un slider automatique en « full » CSS3

6 novembre 2011

Les nouvelles propriétés CSS3, en particulier les animations et les transitions, permettent d’enrichir une page web… mais jusqu’à quel point ? Découvrez un slider simple qui fonctionne uniquement grâce à du HTML et une feuille de style, comprenez CSS3, et le tout sans la moindre ligne de JavaScript !

Du HTML, du CSS, mais pas de JavaScript !

Le slider est très réussi ! On retrouve des transitions simples et fluides de type « fade » et « slide », une barre de progression indiquant le temps d’attente entre deux diapositives, une mise en pause de l’animation automatique au rollover, la possibilité d’insérer une légende sur chaque slide… ou encore l’utilisation d’iframes.

Les keyframes CSS3

La structure HTML ressemble à celle de n’importe quel slideshow jQuery. C’est surtout la feuille de style qui nous intéresse car c’est elle qui génère l’animation du slider. En effet, le fonctionnement est basé sur les keyframes CSS3 qui permettent de définir une liste de propriétés CSS à appliquer en fonction d’une durée donnée : une sorte de timeline qui n’est pas sans rappeler la fonction animate() de jQuery, à la différence qu’on contrôle chaque propriété dans le temps (allant de 0% à 100%).

Voici un exemple de déclaration de keyframe avec l’identifiant « slide-animation » dans laquelle on retrouve une série de propriétés CSS :

@-moz-keyframes slide-animation {
  0% {opacity:0;}
  2% {opacity:1;}
  20% {left:0px; opacity:1;}
  22.5% {opacity:0.6;}
  25% {left:-600px; opacity:1;}
  45% {left:-600px; opacity:1;}
  47.5% {opacity:0.6;}
  50% {left:-1200px; opacity:1;}
  70% {left:-1200px; opacity:1;}
  72.5% {opacity:0.6;}
  75% {left:-1800px; opacity:1;}
  95% {opacity:1;}
  98% {left:-1800px; opacity:0;}
  100% {left:0px; opacity:0;}
}

Puis pour appeler la keyframe sur un élément HTML, il faut utiliser la propriété CSS3 animation comme ceci :

#slider ul {
  width:2400px;
  position:relative;
  left:0px;
  margin:0;
  padding:0;
  list-style:none;
  -moz-animation:slide-animation 18s infinite;
  -webkit-animation:slide-animation 18s infinite;
}

Il est important de préciser que les keyframes sont actuellement compatibles uniquement avec les moteurs Webkit (Chrome, Safari) et Gecko (Firefox). Il n’y a donc pas encore de support d’Opera et d’Internet Explorer 9. Alors, la fin des sliders jQuery est-elle à prévoir d’ici quelques années ? A débattre. Quoiqu’il en soit, voici une ressource qui vient, une fois de plus, démontrer la puissance des nouveautés qu’apporte HML5/CSS3.

Requis : navigateur compatible CSS3
Démonstration : http://iamceege.com/pure-css3-content-slider/
Licence : libre

Commentaires

  • Fdusautoir

    La révolution est en marche :)

  • très bonne astuce et le rendu est vraiment bien !

  • Mimine

    Oh mais génial !!

  • Malik

    Très interessant mais pas compatible avec certains navigateurs :(

  • franck_le_cantalou

    bonjour, le lien
    http://iamceege.com/pure-css3-content-slider/
    ne fonctionne plus .

  • Excellent. Reste à voir la compatibilité avec les différents navigateurs et plateformes disponible