Moechten Sie eine Boersenticker-artige Animation erstellen, die unendlich scrollt? In dieser Anleitung zeigen wir Ihnen, wie wir den Trending-Hashtags-Ticker auf Skyscraper Tools mit reinem CSS erstellt haben – ganz ohne JavaScript.

Live-Demo

Hier ist, was wir erstellen:

#Bluesky #Trending #News #Tech #Sports #Politics #Gaming #Music
#Bluesky #Trending #News #Tech #Sports #Politics #Gaming #Music

Die Schluesseltechnik: Inhalt duplizieren

Das Geheimnis fuer nahtloses unendliches Scrollen ist das Duplizieren des Inhalts. Wenn Sie die Spur um -50% verschieben, uebernimmt der duplizierte Inhalt genau dort, wo das Original war, und erzeugt eine perfekte Schleife.

HTML-Struktur

Das HTML ist unkompliziert – ein Container, eine Spur und duplizierter Inhalt:

HTML
<div class="ticker-container">
  <div class="ticker-track">
    <!-- First copy of content -->
    <div class="ticker-content">
      <span class="ticker-item">#Bluesky</span>
      <span class="ticker-item">#Trending</span>
      <span class="ticker-item">#News</span>
      <span class="ticker-item">#Tech</span>
    </div>
    <!-- Duplicate for seamless loop -->
    <div class="ticker-content">
      <span class="ticker-item">#Bluesky</span>
      <span class="ticker-item">#Trending</span>
      <span class="ticker-item">#News</span>
      <span class="ticker-item">#Tech</span>
    </div>
  </div>
</div>

CSS-Animation

Hier ist das vollstaendige CSS mit detaillierten Kommentaren:

CSS
/* Container with overflow hidden to clip the animation */
.ticker-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.3);
  padding: 10px 0;
  overflow: hidden;
}

/* Gradient fade on edges */
.ticker-container::before,
.ticker-container::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}

.ticker-container::before {
  left: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.3), transparent);
}

.ticker-container::after {
  right: 0;
  background: linear-gradient(to left, rgba(0,0,0,0.3), transparent);
}

/* The animated track */
.ticker-track {
  display: flex;
  animation: ticker-scroll 60s linear infinite;
  width: fit-content;
}

/* Content containers side by side */
.ticker-content {
  display: flex;
  gap: 32px;
  padding: 0 16px;
  white-space: nowrap;
}

/* Individual items */
.ticker-item {
  color: white;
  font-weight: 600;
  font-size: 15px;
}

/* The animation - translate by -50% (half the track) */
@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

Wie es funktioniert

1. Flexbox-Layout

Die .ticker-track verwendet Flexbox, um beide Inhaltskopien nebeneinander zu platzieren. Mit width: fit-content ist die Spur genau so breit wie ihr Inhalt.

2. Die Animation

Die ticker-scroll-Animation verschiebt die Spur von 0 auf -50%. Da wir zwei identische Kopien haben, befindet sich die zweite Kopie genau an der Position, an der die erste begonnen hat, wenn die erste aus dem Bildschirm verschwindet.

3. Lineares Timing

Die Verwendung der linear-Timing-Funktion gewaehrleistet eine konstante Geschwindigkeit ohne Beschleunigung oder Verlangsamung. Das Schluesselwort infinite laesst sie endlos wiederholen.

4. Rand-Farbverlaeufe

Die Pseudo-Elemente ::before und ::after erzeugen Verlaufsueberlagerungen, die den Inhalt an den Raendern ausblenden und einen eleganten Look verleihen.

Anpassungsmoeglichkeiten

Geschwindigkeit aendern

Passen Sie die Animationsdauer an. Groessere Werte = langsameres Scrollen:

animation: ticker-scroll 30s linear infinite;  /* Schneller */
animation: ticker-scroll 120s linear infinite; /* Langsamer */

Bei Hover pausieren

Fuegen Sie eine Hover-Interaktion hinzu, um die Animation zu pausieren:

.ticker-track:hover {
  animation-play-state: paused;
}

Richtung umkehren

Stattdessen von rechts nach links scrollen:

@keyframes ticker-scroll-reverse {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

Vertikaler Ticker

Fuer vertikales Scrollen verwenden Sie flex-direction: column und translateY:

.ticker-track {
  flex-direction: column;
  animation: ticker-scroll-vertical 30s linear infinite;
}

@keyframes ticker-scroll-vertical {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

Server-seitiges Rendering

In der Skyscraper Tools-Implementierung rendern wir das Ticker-HTML auf dem Server mit dynamischen Daten:

TypeScript (Express/Node.js)
// Fetch trending hashtags
const trendingHashtags = await getTrendingHashtags('1h', 20);

// Build ticker HTML with duplicated content
const tickerHtml = `
  <div class="ticker-container">
    <div class="ticker-track">
      <div class="ticker-content">
        ${trendingHashtags.map(h =>
          `<a href="https://bsky.app/hashtag/${h.tag}"
              class="ticker-item">#${h.tag}</a>`
        ).join('')}
      </div>
      <div class="ticker-content">
        ${trendingHashtags.map(h =>
          `<a href="https://bsky.app/hashtag/${h.tag}"
              class="ticker-item">#${h.tag}</a>`
        ).join('')}
      </div>
    </div>
  </div>
`;

Leistungsueberlegungen

  • Transform verwenden – CSS-Transforms sind GPU-beschleunigt, im Gegensatz zur Animation von left oder margin
  • will-change sparsam einsetzen – Fuegen Sie will-change: transform nur hinzu, wenn Sie Ruckeln bemerken
  • Inhalt begrenzen – Fuegen Sie nicht Hunderte von Elementen hinzu; 10-30 sind in der Regel ausreichend
  • Auf Mobilgeraeten testen – Stellen Sie fluessiges Scrollen auf leistungsschwaecheren Geraeten sicher

Browser-Unterstuetzung

Diese Technik funktioniert in allen modernen Browsern:

  • Chrome 43+
  • Firefox 16+
  • Safari 9+
  • Edge 12+
  • iOS Safari 9+
  • Android Chrome 43+

Live erleben

Besuchen Sie Skyscraper Tools, um diesen Ticker in Aktion mit aktuellen trendenden Bluesky-Hashtags zu sehen.

Verwandte Anleitungen

Skyscraper fuer iOS herunterladen →