Introduction au marquee moderne
L'element <marquee> HTML est deprecie depuis des annees, mais le besoin de creer des defilements infinis reste tres present dans le web design moderne. Que ce soit pour afficher des logos de clients, un bandeau d'actualites ou un texte decoratif, le marquee reste un pattern UI populaire.
Dans ce tutoriel complet, nous allons explorer plusieurs techniques CSS modernes pour creer des marquees fluides, performants et accessibles. Aucun JavaScript n'est requis pour les animations de base, et nous verrons comment ajouter des interactions avancees.
Le secret d'un marquee infini parfait reside dans la duplication du contenu. En doublant les elements, on cree une boucle seamless ou la fin rejoint le debut sans aucun saut visible.
Technique CSS animation infinite
La base de tout marquee moderne repose sur @keyframes et la propriete animation. L'idee est simple : deplacer un conteneur de 0% a -50% de sa largeur totale, puis recommencer instantanement.
Structure HTML de base
La structure se compose de trois niveaux : un conteneur avec overflow: hidden, une piste animee, et les elements a afficher. Voici la structure minimale :
<!-- Conteneur avec overflow hidden -->
<div class="marquee-container">
<!-- Piste animee -->
<div class="marquee">
<!-- Groupe 1 : contenu original -->
<div class="marquee-track">
<div class="marquee-item">Item 1</div>
<div class="marquee-item">Item 2</div>
<div class="marquee-item">Item 3</div>
</div>
<!-- Groupe 2 : copie pour la boucle -->
<div class="marquee-track" aria-hidden="true">
<div class="marquee-item">Item 1</div>
<div class="marquee-item">Item 2</div>
<div class="marquee-item">Item 3</div>
</div>
</div>
</div>CSS de base pour l'animation
Le CSS qui fait fonctionner la magie est etonnamment simple. L'animation deplace le conteneur de sa position initiale jusqu'a -50% (la moitie de sa largeur totale, soit exactement la taille du contenu duplique) :
.marquee-container {
overflow: hidden;
width: 100%;
}
.marquee {
display: flex;
width: max-content;
animation: marquee-scroll 25s linear infinite;
}
.marquee-track {
display: flex;
gap: 24px;
padding: 0 12px;
}
@keyframes marquee-scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}Duplication du contenu pour boucle seamless
Le principe de la duplication est essentiel pour creer une boucle parfaite. Quand l'animation atteint -50%, le contenu duplique est exactement a la position ou etait le contenu original au debut. Le reset a 0% est donc invisible.
Si vous avez 6 items et que vous les dupliquez, vous avez 12 items au total. En deplacant de -50%, vous parcourez exactement les 6 premiers items, et au moment du reset, les 6 suivants (identiques) prennent leur place. La transition est invisible car le contenu est identique.
Pour l'accessibilite, ajoutez aria-hidden="true" sur le groupe duplique. Les lecteurs d'ecran ne liront ainsi le contenu qu'une seule fois.
Marquee de logos (clients, partenaires)
Le cas d'usage le plus frequent : afficher une liste de logos de clients, partenaires ou technologies. Voici une implementation complete avec style moderne :
.logo-item {
display: flex;
align-items: center;
justify-content: center;
padding: 16px 32px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
font-weight: 600;
white-space: nowrap;
transition: all 0.3s ease;
}
.logo-item:hover {
background: rgba(99, 102, 241, 0.1);
border-color: rgba(99, 102, 241, 0.3);
}
/* Effet de fondu sur les bords */
.marquee-fade {
position: relative;
}
.marquee-fade::before,
.marquee-fade::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 100px;
z-index: 2;
pointer-events: none;
}
.marquee-fade::before {
left: 0;
background: linear-gradient(90deg, var(--bg-card), transparent);
}
.marquee-fade::after {
right: 0;
background: linear-gradient(-90deg, var(--bg-card), transparent);
}Marquee de texte (news ticker)
Le marquee de texte est ideal pour les bandeaux d'actualites, les annonces ou les elements decoratifs. On peut jouer avec la typographie pour creer des effets visuels impressionnants.
Texte decoratif grand format
Un texte XXL avec effet gradient qui defile en arriere-plan, parfait pour les hero sections ou les separateurs de page :
.text-marquee {
display: flex;
gap: 48px;
}
.text-marquee-item {
font-size: 4rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
/* Gradient text */
background: linear-gradient(135deg, #6366f1, #8b5cf6, #d946ef);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-marquee-separator {
font-size: 4rem;
color: #6366f1;
opacity: 0.5;
}News ticker avec badges
Un bandeau d'actualites professionnel avec des badges colores pour categoriser les informations :
.ticker-marquee {
background: rgba(99, 102, 241, 0.1);
border-top: 1px solid rgba(99, 102, 241, 0.2);
border-bottom: 1px solid rgba(99, 102, 241, 0.2);
padding: 12px 0;
}
.ticker-item {
display: flex;
align-items: center;
gap: 12px;
padding: 0 24px;
white-space: nowrap;
}
.ticker-badge {
padding: 4px 10px;
background: #6366f1;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
}
.ticker-badge.new { background: #10b981; }
.ticker-badge.hot { background: #ef4444; }
.ticker-badge.update { background: #f59e0b; }Pause au hover
Une fonctionnalite essentielle pour l'UX : mettre en pause le defilement quand l'utilisateur survole le marquee. Cela permet de lire le contenu confortablement.
Ajoutez un leger changement visuel au hover (opacite, couleur de fond) pour indiquer a l'utilisateur que le marquee est interactif et qu'il peut le mettre en pause.
L'implementation est tres simple grace a animation-play-state :
/* Pause l'animation au survol du conteneur */
.marquee-container:hover .marquee {
animation-play-state: paused;
}
/* Ou directement sur l'element anime */
.marquee:hover {
animation-play-state: paused;
}
/* Feedback visuel optionnel */
.marquee-container:hover {
background: rgba(99, 102, 241, 0.05);
}Direction inverse et vitesses variables
Pour creer des compositions visuelles interessantes, combinez plusieurs marquees avec des directions et vitesses differentes. L'effet de parallaxe horizontal est tres efficace pour donner de la profondeur.
Direction inversee
Utilisez animation-direction: reverse pour inverser le sens du defilement :
/* Direction inversee */
.marquee-reverse {
animation-direction: reverse;
}
/* Vitesses differentes */
.marquee-slow {
animation-duration: 40s;
}
.marquee-fast {
animation-duration: 15s;
}
/* Vitesse par defaut */
.marquee {
animation-duration: 25s;
}
/* Combiner pour effet parallaxe */
.marquee-layer-1 { animation-duration: 30s; }
.marquee-layer-2 { animation-duration: 20s; animation-direction: reverse; }
.marquee-layer-3 { animation-duration: 25s; }Vitesse adaptative au contenu
Pour une vitesse constante quelle que soit la quantite de contenu, calculez la duree en fonction de la largeur :
// Vitesse en pixels par seconde
const SPEED = 50; // px/s
function setMarqueeSpeed(marquee) {
const track = marquee.querySelector('.marquee-track');
const width = track.offsetWidth;
const duration = width / SPEED;
marquee.style.animationDuration = `${duration}s`;
}
// Appliquer a tous les marquees
document.querySelectorAll('.marquee').forEach(setMarqueeSpeed);Responsive et accessibilite
Un bon marquee doit etre adaptatif et accessible. Voici les bonnes pratiques a suivre pour une experience optimale sur tous les appareils et pour tous les utilisateurs.
Responsive design
Adaptez la taille des elements et la vitesse selon la taille d'ecran :
/* Mobile : elements plus petits, vitesse reduite */
@media (max-width: 768px) {
.marquee {
animation-duration: 35s;
}
.logo-item {
padding: 12px 20px;
font-size: 0.9rem;
}
.text-marquee-item {
font-size: 2.5rem;
}
.marquee-track {
gap: 16px;
}
}
/* Ecrans tres larges : vitesse augmentee */
@media (min-width: 1920px) {
.marquee {
animation-duration: 20s;
}
}Accessibilite
L'accessibilite est cruciale. Respectez les preferences utilisateur pour les animations :
/* Respecter prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.marquee {
animation: none;
}
/* Afficher le contenu statiquement */
.marquee-track[aria-hidden="true"] {
display: none;
}
.marquee-container {
overflow-x: auto;
}
}
/* Masquer le contenu duplique pour les lecteurs d'ecran */
.marquee-track[aria-hidden="true"] {
/* Deja gere par aria-hidden="true" */
}
/* Focus visible pour navigation clavier */
.logo-item:focus-visible {
outline: 2px solid #6366f1;
outline-offset: 2px;
}Les animations en mouvement continu peuvent causer des problemes pour les personnes souffrant de troubles vestibulaires. Toujours respecter prefers-reduced-motion et fournir un moyen de stopper l'animation.
Performance
Quelques conseils pour des marquees performants :
- Utilisez
transformplutot queleftoumarginpour l'animation - cela declenche la composition GPU - Ajoutez
will-change: transformpour preparer le navigateur a l'animation - Evitez trop d'elements dans un meme marquee - fusionnez les SVG si possible
- Limitez le nombre de marquees simultanement animes sur la page
.marquee {
/* Optimisation performance */
will-change: transform;
backface-visibility: hidden;
perspective: 1000px;
}
/* Desactiver will-change apres animation */
.marquee.loaded {
will-change: auto;
}Conclusion
Le marquee CSS moderne est un outil puissant pour ajouter du mouvement et de l'interet visuel a vos pages. En maitrisant la technique de duplication et les proprietes d'animation, vous pouvez creer des defilements fluides et professionnels.
Les points cles a retenir :
- Dupliquez le contenu pour une boucle seamless parfaite
- Utilisez
translateX(-50%)pour l'animation - Ajoutez pause au hover pour une meilleure UX
- Respectez
prefers-reduced-motionpour l'accessibilite - Combinez directions et vitesses pour des effets creatifs
Retrouvez des marquees prets a l'emploi et personnalisables dans notre bibliotheque d'effets, avec code copiable en un clic.