Ajouter des fonctionnalités utiles et intéressantes sur votre site Web peut aider à fidéliser les visiteurs et vous permet de transmettre des informations de manière ludique. Créer vous-même ces fonctionnalités est aussi une manière intelligente d'améliorer vos compétences pour valoriser votre site, et vos prochains projets clients.
Sur ce blog, je vous ai déjà partagé un tutoriel sur la création d'un bandeau d'informations défilantes avec Joomla. Dans une logique similaire, je souhaitais afficher certains sites web que nous avions créés jusqu'à présent en utilisant cet effet de défilement horizontal. La solution la plus simple aurait été d'ajouter une extension avec l'effet souhaité pour afficher ces images.
Mais après réflexion, j'ai décidé de créer ma propre fonctionnalité pour faire défiler ces sites. Et parce que cela pourrait vous être utile, je vais partager mon code avec vous.
Dans cet article, je vous explique comment afficher des images avec un défilement horizontal en pur CSS. Pas besoin de jQuery, pas besoin de JavaScript. Et je vous expliquerai également certaines décisions techniques que j'ai prises.
La structure HTML
Tout d'abord, on créé un containeur <div> dans lequel on ajoute autant de divs que d'images à afficher.
Pour que le défilement horizontal se fasse visuellement de manière fluide, il suffit de ... dupliquer les divs. Voyez comment j'utilise les classes item-1 à item-5, puis je fais une copie exacte de ces divs.
<div class="horizontal-scroll">
<div class="horizontal-scroll-item item-1"></div>
<div class="horizontal-scroll-item item-2"></div>
<div class="horizontal-scroll-item item-3"></div>
<div class="horizontal-scroll-item item-4"></div>
<div class="horizontal-scroll-item item-5"></div>
<div class="horizontal-scroll-item item-1"></div>
<div class="horizontal-scroll-item item-2"></div>
<div class="horizontal-scroll-item item-3"></div>
<div class="horizontal-scroll-item item-4"></div>
<div class="horizontal-scroll-item item-5"></div>
</div>Les CSS
J'utilise flex dans la première <div> pour que les éléments enfants s'affichent et s'alignent sur une seule ligne.
.horizontal-scrolling-items {
display: flex;
height: 288px;
gap: 100px;Je définis la hauteur (288px) selon la taille des images et l'écart entre chaque élément à afficher.
Vous trouverez plus d'informations sur la, propritété CS gap sur ce lien.
Ajoutons maintenant l'animation:
.horizontal-scroll-item {
height: 100%;
width: 464px;
background-size: cover;
animation-duration: 30s;
animation-name: HorizontalScroll;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes infiniteScroll {
from {transform: translateX(0) }
to {transform: translateX(calc(0px - 50% - 50px));}
}La valeur négative finale dans translateX est égale à la moitié de la valeur de l'espace déclaré dans le conteneur d'éléments de défilement (gap : 100 px ;). Cela assurera une animation en boucle parfaitement fluide.
J'ai également défini la hauteur, la largeur et le background-sizepuisque nous utiliserons cette propriété pour affiche rles images.
Pas besoin d'explications supplémentaires pour définir la durée de l'animation.
Et enfin, nous ajoutons les images dans les CSS:
.item-1 {
background-image: url("chemin/vers/image-1.jpg");
}
.item-2 {
background-image: url("chemin/vers/image-2.jpg");
}
.item-3 {
background-image: url("chemin/vers/image-3.jpg");
}
.item-4 {
background-image: url("chemin/vers/image-4.jpg");
}
.item-5 {
background-image: url("chemin/vers/image-5.jpg");
}Si vous vous demandez pourquoi j'ai choisi background-image ici, c'est parce que la boucle affichera les mêmes images indéfiniment et il n'est absolument pas utile que le navigateur des internautes ait à télécharger plusieurs copies du même fichier encore et encore. Ainsi, background-image est définitivement la solution la plus adaptée dans cette situation.
Et voilà
En quelques minutes, vous avez appris à faire défiler horizontalement des images uniquement avec CSS. Avouez que c'était vraiment simple, amusant, instructif et rapide.
N'hésitez pas à utiliser ce code, à l'adapter et à le partager.
