Un diaporama d’images en mouvement capte immédiatement l’attention. Que ce soit pour mettre en avant des réalisations, illustrer vos services ou simplement apporter une touche visuelle dynamique à votre site, l’effet d’images défilantes crée une ambiance moderne et interactive. En offrant un flux visuel continu, vos visiteurs ne manqueront pas d’être séduits par la richesse graphique et le dynamisme de votre interface. Ce type d’animation peut renforcer l’identité de votre marque et transmettre vos messages sans avoir à surcharger votre page de contenus statiques.
NB : Assurez-vous que le diaporama ne nuise pas à la lisibilité de votre site et qu’il s’intègre harmonieusement dans l’ensemble du design.
Pour voir à quoi ressemblera l’animation 👇 (Pour prendre un exemple, ici, je vous montre mes certifications obtenues sur les différents outils que j’utilise)
Avant de rentrer dans les détails, découvrons tout de suite le code nécessaire pour réaliser un texte qui défile en boucle. Le script est scindé en deux parties :
<div class="slider">
<div class="slide-track">
<!-- Bloc initial des logos -->
<div class="slide"><img decoding="async" src="entrer-url-image-ici" alt="entrer url image ici" title="Créer des images qui défilent à l'infini 36"></div>
</div>
</div>
.slider {
overflow: hidden;
width: 100%;
margin: 0 auto;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-250px * 9));
}
}
.slide-track {
animation: scroll 30s linear infinite;
display: flex;
width: calc(225px * 20);
justify-content: center;
animation-delay: 0s;
}
.slide {
margin-top: -2.5rem;
margin-bottom: -3rem;
width: 200px;
margin-right: 40px;
}
@media (max-width: 768px) {
.slider {
height: 100px;
}
.slide {
margin-top: -3rem;
width: 200px;
margin-right: 40px;
}
.slide-track {
animation-duration: 50s;
}
}
@media (max-width: 480px) {
.slider {
height: 85px;
}
.slide {
margin-top: -3.5rem;
}
.slide-track {
animation-duration: 50s;
}
}
Un créateur passionné et un stratège digital qui transforme vos idées en expériences mémorables. Plus qu’un simple nom, g.flo est un concept audacieux : un jeu de mots qui signifie “j’ai Flo” — g.un site web, g.une image de marque, g.une stratégie unique.
Avec g.flo, vous avez :
✔ Un design sur-mesure qui incarne l’ADN de votre marque
✔ Une expérience fluide et engageante pour captiver vos visiteurs
✔ Les dernières tendances UX/UI intégrées à votre projet
✔ Une réalisation efficace et soignée, sans compromis sur la qualité
Prêt à dire « g.flo » vous aussi ?
Testez mon simulateur de devis interactif et obtenez en moins d’une minute une estimation personnalisée pour votre futur site.
Conseil pratique : Pour éviter toute modification involontaire de votre mise en page, insérez ce script dans une section dédiée. Vérifiez également que votre plugin de sécurité n’empêche pas l’exécution des balises <script>.
Vous avez plusieurs options pour injecter le CSS dans WordPress :
L’avantage d’utiliser HTML, CSS et JavaScript directement est la flexibilité offerte :
animation: loop-anim 35s linear infinite; pour accélérer ou ralentir le défilement..content img afin de préserver l’harmonie visuelle.src) par celles correspondant à votre univers graphique.
Idée bonus : Vous pouvez également ajouter des légendes ou des liens cliquables sur chaque image pour renforcer l’interactivité.
Quelques éléments à surveiller pour une intégration optimale :
Les images ne défilent pas :
Vérifiez que le script JavaScript n’est pas bloqué par un plugin de sécurité et que la structure HTML est correctement implémentée.
L’animation est trop rapide ou trop saccadée :
Modifiez la durée de l’animation dans le CSS et testez sur différents écrans pour trouver le bon équilibre.
Les images se répètent de manière incohérente :
Assurez-vous que la fonction repeatContent du script JavaScript fonctionne correctement en ajustant la largeur et le nombre de répétitions.
Conseil pratique : Utilisez l’outil de responsive design de votre navigateur (comme l’inspecteur de Chrome) pour vérifier le comportement de l’animation sur mobile et desktop.
Pour mettre en place un diaporama d’images qui défilent à l’infini sur WordPress sans recourir à un plugin, il suffit d’ajouter quelques lignes de code HTML, CSS et JavaScript à votre site. Ce type d’animation apporte un côté dynamique et moderne, renforçant l’attrait visuel et l’identité de votre marque.
N’hésitez pas à personnaliser le code en fonction de vos besoins : ajustez la durée de l’animation, la taille des images et ajoutez vos propres contenus pour un rendu parfaitement intégré à votre charte graphique. Et surtout, testez toujours sur plusieurs appareils pour garantir une expérience utilisateur optimale.
Si vous souhaitez aller plus loin dans la personnalisation ou avez besoin d’un accompagnement, je reste disponible pour vous guider vers une solution sur-mesure. Osez innover et offrez à vos visiteurs une expérience visuelle inoubliable dès les premières secondes !
Accédez directement aux sections clés de cet article Comment créer un texte qui défile à l’infini sur WordPress (sans plugin) Épater les visiteurs dès leur première seconde sur un site WordPress, en mettant
Accédez directement aux sections clés de cet article Les conseils que j’aurais aimé avoir lorsque j’ai crée mon site wordpress Vous envisagez de créer un site WordPress mais ne savez pas par où
Accédez directement aux sections clés de cet article 10 étapes pour améliorer son site internet et convertir ses visiteurs en clients Vous constatez que votre site web ne génère pas suffisamment de demandes
