carrousel de chapiteau infini

Il s’agit d’une animation à défilement infini qui est souvent utilisée pour afficher en boucle une liste de logos d’entreprises partenaires.

Aperçu

Cas d’utilisation et fonctionnalités

• Relations publiques : montrez votre fiabilité en affichant une liste des logos des sponsors et des entreprises partenaires sans interruption.
• Vivacité visuelle : Faites défiler les informations de la campagne et les nouvelles informations dans le texte pour attirer l’attention de l’utilisateur.
• Infinite Loop : dupliquez et positionnez le contenu et bouclez-le de manière transparente avec des animations CSS pour donner l’illusion d’un défilement éternel.

Points clés du design et de l’UX (Design & UX)

• Défilement fluide : en utilisant l’animation CSS, le défilement est plus fluide et offre de meilleures performances que JavaScript.
• Pause au survol : Si l’utilisateur souhaite examiner le contenu de plus près, l’animation est mise en pause au survol de la souris (animation-play-state : paused).

Comment personnaliser (Guide de personnalisation)

• Ajustement de la vitesse : Vous pouvez modifier la vitesse de défilement en augmentant ou en diminuant 20s dans CSS animation: marquee 20s linear infinite;.
• Modifier le contenu : Vous pouvez modifier librement le logo et les éléments de texte.Assurez-vous que le contenu des deux ensembles (original et double) est le même.

Code d’implémentation (Implémentation)

<div class="w-full overflow-hidden bg-white dark:bg-zinc-950 py-10">
<style>
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  .animate-marquee {
    animation: marquee 20s linear infinite;
  }
  .animate-marquee:hover {
    animation-play-state: paused;
  }
</style>
<div class="flex w-[200%] animate-marquee gap-8 items-center">
  <!-- First set -->
  <div class="flex-1 flex justify-around items-center font-bold text-2xl text-gray-300 dark:text-zinc-700">
    <span>LOGO 1</span>
    <span>LOGO 2</span>
    <span>LOGO 3</span>
    <span>LOGO 4</span>
    <span>LOGO 5</span>
  </div>
  <!-- Duplicate set for infinite effect -->
  <div class="flex-1 flex justify-around items-center font-bold text-2xl text-gray-300 dark:text-zinc-700">
    <span>LOGO 1</span>
    <span>LOGO 2</span>
    <span>LOGO 3</span>
    <span>LOGO 4</span>
    <span>LOGO 5</span>
  </div>
</div>
</div>