unendliches Festzeltkarussell

Hierbei handelt es sich um eine Endlos-Scroll-Animation, die häufig verwendet wird, um eine Liste der Logos von Partnerunternehmen in einer Schleife anzuzeigen.

Vorschau

Anwendungsfälle und Funktionen

• Öffentlichkeitsarbeit: Zeigen Sie Ihre Vertrauenswürdigkeit, indem Sie ohne Unterbrechung eine Liste mit Logos von Sponsoren und Partnerunternehmen anzeigen.
• Visuelle Lebendigkeit: Scrollen Sie durch Kampagneninformationen und neue Informationen im Text, um die Aufmerksamkeit des Benutzers zu erregen.
• Endlosschleife: Duplizieren und positionieren Sie Inhalte und wiederholen Sie sie nahtlos mit CSS-Animationen, um die Illusion eines ewigen Scrollens zu erzeugen.

Kernpunkte von Design und UX (Design & UX)

• Reibungsloses Scrollen: Durch die Verwendung der CSS-„Animation“ ist das Scrollen flüssiger und hat eine bessere Leistung als JavaScript.
• Pause bei Hover: Falls der Benutzer sich den Inhalt genauer ansehen möchte, wird die Animation beim Hover mit der Maus angehalten („animation-play-state: paused“).

So passen Sie es an (Anpassungsanleitung)

• Geschwindigkeit anpassen: Sie können die Scrollgeschwindigkeit ändern, indem Sie „20s“ in CSS „animation: marquee 20s linear infinite;“ erhöhen oder verringern.
• Inhalt ändern: Sie können das Logo und die Textelemente frei ändern.Stellen Sie sicher, dass der Inhalt der beiden Sätze (Original und Duplikat) identisch ist.

Implementierungscode (Implementierung)

<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>