--- title: "Marquee" type: component version: "2.2.2" doc_version: "2.7.3" status: stable date: 2026-07-05 library: Frutjam stack: tailwind_css compatibility: universal framework_agnostic: true runtime_requirement: none description: "Pure CSS Tailwind CSS Marquee with infinite scroll, pause-on-hover, reverse direction, and vertical support. No JavaScript required." url: https://frutjam.com/fr/components/marquee --- # Marquee Les composants de chapiteau créent des bandes de contenu infinies à défilement continu, idéales pour les logos de marque, les bannières d'annonces, les témoignages ou les nuages ​​de tags. Construit entièrement avec des animations CSS, le chapiteau Frutjam prend en charge les directions horizontales et verticales, la pause en survol, la lecture réversible et le contrôle de la vitesse. Dupliquez l'élément `marquee-track` (avec `aria-hidden`) pour une boucle transparente et sans interruption. CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile. | Classe | Taper | Description | | ---------------- | ------------ | ---------------------------------------------------------------------------------------------- | | marquee | Base | Conteneur externe : les clips débordent et contiennent les variables d'animation | | marquee-track | Modificateur | Défilement de la rangée intérieure ; dupliquer avec `aria-hidden` pour une boucle transparente | | marquee-pause | Modificateur | Met en pause l'animation au survol | | marquee-reverse | Modificateur | Défile dans la direction opposée | | marquee-vertical | Modificateur | Fait défiler de haut en bas au lieu de gauche à droite | | marquee-slow | Speed | Défilement lent (cycle de 40 s) | | marquee-normal | Speed | Vitesse par défaut (cycle de 20 s) | | marquee-fast | Speed | Défilement rapide (cycle de 10 s) | | marquee-fade | Modificateur | Ajoute des bords de fondu en dégradé des deux côtés | ## Utilisation de base Ajoutez deux éléments `marquee-track` identiques — le second (avec `aria-hidden="true"`) comble le vide lorsque le premier défile hors de l'écran. ## Pause au survol Ajoutez `marquee-pause` pour arrêter l'animation lorsque l'utilisateur survole la bande. ```html
Hover me to pause the scroll Animation stops here
``` ## Inverser la direction Utilisez `marquee-reverse` pour faire défiler de droite à gauche au lieu de gauche à droite. Combinez deux rangées pour un effet superposé. ```html
Alpha Beta Gamma Delta Epsilon
Alpha Beta Gamma Delta Epsilon
``` ## Variantes de vitesse ```html
Slow Slow Slow Slow Slow
Normal Normal Normal Normal Normal
Fast Fast Fast Fast Fast
``` ## Chapiteau vertical Ajoutez `marquee-vertical` et donnez au conteneur une hauteur fixe pour un défilement de haut en bas. ```html
Announcement one
Announcement two
Announcement three
Announcement four
Announcement five
``` ## Mots-clés technologiques Un modèle courant pour présenter un ensemble de compétences ou une pile technologique. ```html
HTML CSS JavaScript TypeScript React Vue Tailwind CSS Node.js
``` ## Écart personnalisé Remplacez `--marquee--gap` ou `--marquee--duration` par un utilitaire en ligne pour affiner l'espacement et la vitesse. ```html
Wide gap Wide gap Wide gap Wide gap
``` ## Bords fondus Ajoutez `marquee-fade` pour faire fondre les deux extrémités de la bande dans l'arrière-plan de la page pour un aspect soigné. ```html
Design Development Performance Accessibility Open Source Security Testing
``` ## Bannière d'annonce Une fine barre de téléscripteur pour les promotions ou les avis à l'échelle du site. Combinez `marquee-fade` et `marquee-pause` pour la meilleure expérience. ```html
🎉 Version 2.0 is here — explore what's new 🌿 Built with Tailwind CSS v4 ⚡ Zero JavaScript, pure CSS components 🎨 Fully themeable with CSS variables
``` ## Chapiteau de logo Présentez des partenaires ou des marques de confiance dans une bande à défilement continu. Utilisez `marquee-fade` pour mélanger les bords avec l'arrière-plan. ```html
Acme
Globex
Initech
Umbrella
Hooli
Pied Piper
Vehement
Massive
``` ## Cartes de témoignage Faites défiler les cartes de témoignage avec une subtile pause au survol pour plus de lisibilité. ```html

"Absolutely love the component library. Saves us hours every sprint."

A

Alex Morgan

Frontend Engineer

"The best Tailwind UI kit I've used. Clean, accessible, and easy to customize."

J

Jamie Lee

Product Designer

"Shipped our design system 3× faster thanks to Frutjam. Highly recommend."

S

Sam Rivera

Tech Lead

"Great DX, thoughtful defaults, and the dark mode just works out of the box."

R

Riley Chen

Full Stack Developer

```