Créez une animation de carrousel à défilement infini avec pause au survol en utilisant uniquement du CSS. Aucun JavaScript requis.
Nous aimons JavaScript, bien sûr. Mais c'est toujours amusant de voir ce que nous pouvons accomplir avec uniquement du CSS - surtout en ce qui concerne les animations, car les animations CSS sont souvent "moins lourdes" que les animations JavaScript.
Dans cet article, je vais vous montrer comment créer une animation de carrousel à défilement infini avec effet de pause au survol en utilisant uniquement du CSS. Voici un aperçu de ce que nous allons réaliser :
Tout d'abord, créons la structure de base de notre carrousel. Considérons une rangée de cartes :
Ça a l'air bien, non ? Les cartes peuvent être vos bannières élégantes, des images de produits, ou tout ce que vous voulez afficher dans votre carrousel.
Comme nous voulons que le carrousel soit infini, il doit être connecté de bout en bout. Instinctivement, nous pouvons essayer de répéter les cartes :
Jetez un coup d'œil au résultat :
Seul le premier ensemble de cartes est visible. Si vous vérifiez le HTML, vous verrez que le deuxième ensemble de cartes est caché et suit le premier ensemble.
Il est temps d'animer le carrousel ! Comme nous avons deux ensembles de cartes connectés, nous pouvons animer le carrousel en transformant les groupes de cartes. Voici comment :
Nous avons encore une touche finale : mettre en pause l'animation lorsque vous survolez le carrousel. Cela permettra aux utilisateurs de voir le contenu plus clairement. Comme nous avons deux ensembles de cartes, nous devons mettre en pause les deux groupes lorsque nous survolons le carrousel :
C'est tout ! 🎊 Maintenant, le carrousel se mettra en pause lorsque vous le survolerez.
Le CSS est puissant, et c'est toujours amusant d'explorer ce que nous pouvons accomplir avec. Il existe également d'autres propriétés CSS comme scroll-snap-type et scroll-snap-align qui peuvent vous aider à créer un carrousel interactif. Bon codage ! 🚀