Pour le second article de ce blog, je vais partager une technique que j'ai trouvée pour réaliser un slider infini uniquement en CSS3 pour mon site, Adiuvo.

En effet, je suis un développeur qui aime éviter de mettre du javascript à outrance tant que je le peux. Je fais donc en sorte que toutes les animations de ce site soient en pure CSS3.

Qu'est ce que nous voulons :

  • Nous cherchons à réaliser un slider infini d'images (on pourrait mettre n'importe quel type de contenu en réalité)
  • Nous ne voulons pas utiliser javascript pour "déplacer" les premières images à la fin du slider afin de créer cet effet d'infini
  • Ce slider est de taille définie à l'avance. Pour les besoin de la demo ici, nous allons faire un slider de 300px de long.

Le point compliqué de cette réalisation est que sans l'utilisation du javascript, il est plus compliqué d'obtenir un slider continu qui ne présente pas d'accrochage visuel.

La solution proposée ici sera de répéter les premiers éléments de notre slider à la fin de celui-ci pour donner l'impression qu'il tourne en continu.

Pour rendre la chose plus claire, je vous propose de procéder en deux étapes :...