Marquee

Defilement horizontal infini de logos ou items. Boucle sans gap.

autoCSSlogosinfinite

Trigger: Automatique (boucle)

CSS requis: Oui

Difficulte: easy

Preview live

Code

const doubled = [...items, ...items];
<div className="overflow-hidden">
  <div className="flex gap-4 animate-marquee"
    style={{ width: `${doubled.length * ITEM_WIDTH}px` }}>
    {doubled.map((item, i) => <div key={i}>...</div>)}
  </div>
</div>

CSS requis

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.animate-marquee { animation: marquee-scroll 30s linear infinite; }

Instructions

Dupliquez les items pour creer le loop sans gap. Ajustez la duree (30s) selon le nombre d'items. La largeur totale doit etre exacte (nombre d'items * largeur) pour un scroll fluide.