So baust du ein natives, CMS-gesteuertes Ticker Tape bzw. Marquee in Webflow

So baust du einen nativen, CMS-gesteuerten Webflow-Scroller bzw. Ticker Tape

Am Ende des Beitrags findest du außerdem das Cloneable des Projekts, das ich im Video erstellt habe. Vorab eine Entschuldigung für das Video: Milk Moon Studio ist nur ein kleines Webflow-Studio, das heißt, ich baue viele davon für Kunden, und deshalb bin ich vermutlich nicht besonders gut darin, es zu erklären, weil es für mich längst selbstverständlich ist.

Also… ein Ticker Tape, Scroller oder Marquee, wie man es oft auf Nachrichtenseiten oder Börsenplattformen sieht, ist eine fortlaufend scrollende Liste von Elementen, die sich horizontal über den Bildschirm bewegt. In Webflow kann das Text sein, Bilder, alles, was du ins CMS packen und endlos von einer Seite zur anderen bewegen willst. Unser Ziel in diesem Beitrag und im Video ist ein responsiver, CMS-gesteuerter Ticker, der sich an den Inhalt anpasst und unabhängig von der Anzahl der Elemente flüssig läuft. Diese Flexibilität ist wichtig bei dynamischen Inhalten, bei denen die Anzahl oder die Breite der Elemente variieren kann.

Schritt-für-Schritt-Anleitung

Schritt 1: Die Struktur aufbauen

Zuerst skizzieren wir die Struktur.

1. Section: Sie enthält alles.
2. Scroll Wrapper: Er übernimmt das Overflow und sorgt dafür, dass nur der sichtbare Teil des Tickers angezeigt wird. Sehr wichtig, um alles sauber zu umschließen und zu verhindern, dass die Seite über den Viewport des Browsers hinausläuft.
3. Scroll Track: Die Spur, entlang der die Elemente scrollen.
4. Collection List Wrapper: Den duplizieren wir für eine durchgehende Schleife, damit wir am Ende der Collection-List-Elemente keinen leeren weißen Bereich sehen, während sie über den Bildschirm wandern.
5. Collection List: Hier leben unsere dynamischen CMS-Elemente.
6. Collection List Items: Die einzelnen Elemente im Ticker.

Wir beginnen mit den nötigen Containern und richten danach die Interaktion ein.

Schritt 2: Section und Scroll Wrapper erstellen

1. Füge eine Section hinzu: Sie ist unser Hauptcontainer.

   Wir gehen zunächst davon aus, dass wir einen Ticker über die volle Breite wollen, obwohl das nicht sein muss und das Cloneable beides enthält. Wir setzen die Section auf 100vw.

2. Füge den Scroll Wrapper in die Section ein:

   Stelle ihn auf Flex, Horizontal und linksbündig (wir bewegen den Ticker von rechts nach links über den Bildschirm) und mit Overflow-Handling, also overflow: hidden, und einer Breite von 100%.

Schritt 3: Scroll Track und Collection List Wrapper hinzufügen

1. Füge den Scroll Track in den Scroll Wrapper ein:

   Setze Flex Child Sizing auf: Don't shrink or grow.
   Stelle ihn auf Flex, Horizontal, Left Aligned.
   Setze die Breite auf Auto.

2. Füge den Collection List Wrapper in den Scroll Track ein:

   Mach dasselbe noch einmal:

   Setze Flex Child Sizing auf: Don't shrink or grow.
   Stelle ihn auf Flex, Horizontal, Left Aligned.
   Setze die Breite auf Auto.

Schritt 4: Die Collection List einrichten

1. Auch hier dasselbe:
   Setze Flex Child Sizing auf: Don't shrink or grow.
   Stelle sie auf Flex, Horizontal, Left Aligned.
   Setze die Breite auf Auto.

Das wirkt vielleicht etwas redundant, aber es funktioniert, also vertrau darauf.
Damit ist das Ticker Tape bzw. der Scroller eingerichtet und bereit, von rechts nach links zu laufen. 

Schritt 5: Die Collection List Items gestalten

1. Setze Flex Child Sizing auf: Don't shrink or grow.
2. Gestalte sie nach deinen Anforderungen, achte aber darauf, dass jede Gestaltung von Breite, Höhe oder Padding in oder an den Elementen selbst erfolgt, nicht außerhalb. Den Abstand zwischen den Elementen setzen wir zum Beispiel nicht über Margin, sondern über Padding innerhalb des Elements. Margins an den Elementen verliert man leicht aus den Augen, sobald die Liste dupliziert wird und in der Schleife läuft, während Padding innerhalb des Elements dafür sorgt, dass der „Abstand“ immer gleichmäßig bleibt. (Flex-Elemente fassen Margins nicht zusammen wie Block-Elemente, das Padding dient also der Berechenbarkeit und nicht dazu, Margin Collapse zu vermeiden.)
3. Das Tolle daran, auf diese Weise mit dem CMS zu bauen: Du kannst das Element gestalten, ihm zum Beispiel eine feste Breite geben, und erhältst eine Liste schöner, einheitlicher Elemente in gleicher Größe, die über den Bildschirm scrollen. Oder du lässt den CMS-Inhalt im Element die Breite bestimmen. Eine Liste von Logos mit unterschiedlichen Breiten, jedes in einem eigenen Element, ergibt eine schöne scrollende Logoleiste, nur dass die Elemente hier nicht dieselbe Breite haben müssen wie im vorherigen Beispiel. Wir zeigen beides im Cloneable, aber so bleibt es flexibel und einfach und funktioniert für Text, Bilder, Börsenkurse, was auch immer. Feste oder dynamische Breiten für die Elemente.

Wenn du wissen willst, wie es mit dem Inhalt dieser Elemente weitergeht, lohnen sich unsere Beiträge zu Text-Spans in dynamischen CMS-Textelementen und zu einem Flexbox-CMS-Muster, das sich maßgeschneidert anfühlt.

Schritt 6: Den Collection List Wrapper duplizieren

Dupliziere den Collection List Wrapper, um eine durchgehende Schleife zu erzeugen. Unsere Interaktion bewegt die Klasse des Collection List Wrappers um 100% nach links, und wenn nicht zwei Collection Lists nach links wandern, sehen wir Leerraum, nachdem die gesamte Liste der Elemente nach links gewandert ist.

Schritt 7: Die Interaktion hinzufügen

NB! Diese Schritte verwenden die Classic-Interaktionen von Webflow, die wir beim Bau verwendet haben. Interactions with GSAP ist auf neuen Sites inzwischen der Standard. Wenn das Interactions-Panel also anders aussieht, wechsle über das Dropdown am unteren Rand des Panels zu Classic.

1. Gehe zu Interactions: Erstelle in Webflow eine neue Page-Load-Interaktion. Wir nutzen sie, weil der Ticker ganz oben in unserem Projekt sitzt, du kannst aber auch beim Scrollen auslösen.
2. Bewege die Klasse des Collection List Wrappers:
   • Bewege auf -100% über 60 Sekunden.
   • Setze das Easing auf Linear.
   • Setze sofort nach Abschluss der Bewegung auf 0% zurück, ohne Verzögerung und ohne Dauer.
   • Achte nach dem Speichern darauf, dass Loop aktiviert ist.

Das erzeugt den endlosen Scroll-Effekt.

Letzte Feinarbeiten

• Testen und anpassen: Sieh dir dein Projekt in der Vorschau an und prüfe, ob alles flüssig scrollt. Passe bei Bedarf das Timing an.
• Responsivität: Stelle sicher, dass der Ticker responsiv ist, indem du ihn auf verschiedenen Bildschirmgrößen testest.

Du hast einen dynamischen, CMS-gesteuerten Ticker-Tape-Scroller in Webflow gebaut. Damit kannst du Nachrichtenschlagzeilen, Börsenkurse, Logos oder beliebige andere Informationen über deine Website laufen lassen. Entscheidend ist, die Struktur und die Interaktionen zu verstehen, damit das Scrollen flüssig und responsiv läuft. Auto-Breite für alles innerhalb des äußeren Wrappers, außer für das Collection List Item, falls es eine feste Breite hat, und bei allen Flex-Kindelementen weder wachsen noch schrumpfen.

Häufig gestellte Fragen

Wie erstelle ich ein Ticker Tape oder Marquee in Webflow? Baue einen Scroll Wrapper mit Overflow hidden, setze einen Scroll Track hinein, dann zwei identische Collection List Wrapper nebeneinander, und nutze eine sich wiederholende Page-Load-Interaktion, die die Wrapper-Klasse mit linearem Easing von 0% auf -100% bewegt. Die obigen Schritte decken jede Einstellung ab.

Kann ein Webflow-Ticker über das CMS gesteuert werden? Ja. Da die Elemente aus einer Collection List stammen, fügst du im CMS Elemente hinzu oder entfernst sie, und der Ticker passt sich an, egal ob Text, Logos oder Börsenkurse, mit festen oder dynamischen Breiten.

Warum muss ich den Collection List Wrapper duplizieren? Die Interaktion bewegt die Klasse des Collection List Wrappers um 100% nach links. Ohne eine zweite Kopie direkt dahinter würdest du also Leerraum sehen, bis die Schleife zurückgesetzt wird. Das Duplikat füllt diese Lücke, sodass der Ticker endlos wirkt.

Du kannst das Cloneable hier holen, und stell deine Fragen gern in den Kommentaren, falls noch welche offen sind, nachdem du dir das Projekt und das Video angesehen hast. Außerdem verlinke ich das ursprüngliche Ticker-Cloneable, von dem ich im Video erzähle und das mich zu diesem Projekt inspiriert hat. Es ist ebenfalls ein gutes Beispiel. Auf der Suche nach einem weiteren CMS-Trick? Probiere nahtlose Pagination. Und schau dir zum Schluss unbedingt unsere anderen How-tos und Cloneables an.