In diesem Beitrag werden wir den Aufbau eines CMS-betriebenen Ticker-Tape-Scrollers in Webflow erläutern. Sie können meinem Geschwafel im eingebetteten Video folgen.
So erstellen Sie ein natives Webflow CMS-betriebenes Scroller/Ticker-Tape
Am Ende des Beitrags findet ihr auch das Clonable des Projekts, das ich im Video erstellt habe. Ich werde mit einer Ausrede für das Video beginnen, Milk Moon Studio ist nur ein kleines Webflow-Studio, was bedeutet, dass ich viele davon für Kunden baue, was bedeutet, dass ich wahrscheinlich nicht gut darin bin, das zu erklären, da es inzwischen eine Selbstverständlichkeit ist.
Also... ein Tickerband oder ein Scroller, der oft auf Nachrichten-Websites oder Börsenplattformen zu sehen ist, ist eine kontinuierlich scrollende Liste von Elementen, die sich horizontal über den Bildschirm bewegen. In Webflow kann das Text, Bilder, alles sein, was Sie in das CMS stecken können und das Sie auf Dauer von einer Seite zur anderen bewegen möchten. Unser Ziel in diesem Beitrag und Video ist es, einen responsiven, CMS-gestützten Ticker zu erstellen, der sich an den Inhalt anpasst und unabhängig von der Anzahl der Artikel ein nahtloses Erlebnis gewährleistet. Diese Flexibilität ist entscheidend für dynamische Inhalte, bei denen die Anzahl der Artikel oder die Artikelbreite variieren können.
Anleitung Schritt für Schritt
Schritt 1: Aufbau der Struktur
Lassen Sie uns zunächst die Struktur skizzieren.

- Sektion: Das wird alles enthalten.
- Scroll-Wrapper: Dadurch wird der Überlauf vermieden und sichergestellt, dass nur der sichtbare Teil des Tickers angezeigt wird. Sehr wichtig, alles schön zu verpacken und zu verhindern, dass die Seite das Browserfenster überfüllt.
- Titel scrollen: Die Spur, entlang der die Elemente gescrollt werden.
- Wrapper für Sammlungslisten: Wir duplizieren das, um eine fortlaufende Schleife zu erstellen. Im Grunde genommen, damit wir nicht das Ende der Sammlungslistenelemente mit Leerzeichen dahinter sehen, wenn wir sie über den Bildschirm bewegen.
- Liste der Sammlungen: Hier befinden sich unsere dynamischen CMS-Elemente.
- Artikel der Sammlungsliste: Einzelne Artikel im Ticker.
Wir erstellen zunächst die erforderlichen Container und richten dann die Interaktion ein.
Schritt 2: Erstellen des Abschnitts und des Scroll-Wrappers
- Einen Abschnitt hinzufügen: Das wird unser Hauptcontainer sein.
Wir gehen zunächst davon aus, dass wir einen Ticker in voller Breite erstellen wollen, obwohl dies nicht der Fall sein muss und das Clonable beides hat. Wir machen den Abschnitt 100vw.
- Fügen Sie den Scroll Wrapper hinzu innerhalb des Abschnitts:
Machen Sie es flexibel, horizontal und linksbündig. (Wir bewegen den Ticker auf dem Bildschirm von rechts nach links) und behandeln den Überlauf, also den Überlauf: versteckt, und die Breite beträgt 100%.
Schritt 3: Hinzufügen des Scrolltracks und des Collection List-Wrappers
- Den Scrolltrack hinzufügen im Scroll-Wrapper:
Stellen Sie Flex Child Sizing auf: Nicht schrumpfen oder wachsen.
Machen Sie es flexibel, horizontal und linksbündig.
Stellen Sie die Breite automatisch ein. - Fügen Sie den Sammlungslisten-Wrapper hinzu innerhalb des Scrolltracks:
Mach das Gleiche noch einmal:
Stellen Sie Flex Child Sizing auf: Nicht schrumpfen oder wachsen.
Machen Sie es flexibel, horizontal und linksbündig.
Stellen Sie die Breite automatisch ein.
Schritt 4: Richte die Sammlungsliste ein
- Das Gleiche hier:
Stellen Sie Flex Child Sizing auf: Nicht schrumpfen oder wachsen.
Machen Sie es flexibel, horizontal und linksbündig.
Stellen Sie die Breite automatisch ein.
Das alles mag ein bisschen überflüssig erscheinen, aber es funktioniert, also mach mit.
Sie haben jetzt sichergestellt, dass das Tickerband bzw. der Scroller eingerichtet und bereit ist, von rechts nach links zu fahren.
Schritt 5: Elemente der Sammlungsliste gestalten
- Stellen Sie Flex Child Sizing auf: Nicht schrumpfen oder wachsen.
- Stylen Sie sie nach Ihren Bedürfnissen, aber achten Sie darauf, dass das Styling in Bezug auf Breite, Höhe oder Polsterung innen oder auf ihnen erfolgt, nicht außen. Wir möchten zum Beispiel nicht, dass du den Abstand zwischen den Artikeln festlegst, indem du einen Rand hinzufügst, sondern eine Polsterung innerhalb des Artikels hinzufügst. Ein Rand kann dazu führen, dass der Rand zusammenfällt, wenn zwei Ränder von verschiedenen Elementen, die sich aneinander drücken, zusammenfallen. Durch die Verwendung von Polstern innerhalb des Artikels wird sichergestellt, dass der „Abstand“ immer gleichmäßig bleibt.
- Das Tolle an der Erstellung mit dem CMS im Weg ist, dass Sie das Objekt stylen können, z. B. geben Sie ihm eine feste Breite und Sie haben eine Liste mit schönen, einheitlichen Elementen, die alle die gleiche Größe haben und über den Bildschirm scrollen, oder Sie könnten den Inhalt des CMS, der innerhalb des Elements verwendet wird, die Breite bestimmen lassen. Eine Liste von Logos, alle mit unterschiedlichen Breiten, jedes in seinem eigenen Element, würde eine nette Liste von scrollenden Logos ergeben, aber die Elemente müssen in diesem Beispiel nicht die gleiche Breite haben wie im vorherigen. Wir zeigen beide im Clonable, aber das macht es flexibel und einfach und bedeutet, dass es für Text, Bilder, Aktienkurse, was auch immer funktioniert. Feste oder dynamische Breiten für Artikel.
Schritt 6: Den Collection List Wrapper duplizieren
Duplizieren Sie den Sammlungslisten-Wrapper, um eine nahtlose Schleife zu erstellen. Durch unsere Interaktion wird die Wrapper-Klasse für Sammlungslisten zu 100% nach links verschoben. Wenn sich nicht zwei Sammlungslisten nach links bewegen, sehen wir Leerzeichen, nachdem die gesamte Liste der Elemente nach links verschoben wurde.
Schritt 7: Interaktion hinzufügen
- Gehe zu Interaktionen: Erstellen Sie in Webflow eine neue Seitenladeinteraktion. Wir verwenden diese, da sie sich ganz oben in unserem Projekt befindet, aber Sie können sie auch beim Scrollen auslösen.
- Verschieben Sie die Collection List Wrapper-Klasse:
- Steigt innerhalb von 60 Sekunden auf -100%.
- Stellen Sie die Beschleunigung auf linear ein.
- Wird sofort nach Abschluss des Zuges auf 0% zurückgesetzt, ohne Verzögerung oder Dauer.
- Stellen Sie nach dem Speichern sicher, dass Loop angekreuzt ist.
Dadurch wird der unendliche Scroll-Effekt erzeugt.
Letzte Feinheiten
- Testen und anpassen: Zeigen Sie eine Vorschau Ihres Projekts an, um sicherzustellen, dass alles reibungslos scrollt. Passen Sie bei Bedarf das Timing an.
- Reaktionsfähigkeit: Stellen Sie sicher, dass der Ticker reagiert, indem Sie ihn auf verschiedenen Bildschirmgrößen testen.
Sie haben in Webflow einen dynamischen, CMS-gestützten Ticker-Tape-Scroller erstellt. Diese Funktion kann verwendet werden, um Schlagzeilen, Aktienkurse, Logos oder andere Informationen anzuzeigen, mit denen Sie auf Ihrer Website blättern möchten. Der Schlüssel liegt darin, die Struktur und die Interaktionen zu verstehen, um ein reibungsloses und responsives Scrollen zu gewährleisten. Automatische Breite für alles, was sich innerhalb des äußeren Wrappers befindet, mit Ausnahme des Elements in der Sammlungsliste, wenn Sie eine feste Breite haben, und vergrößern oder verkleinern Sie nicht bei allen flexiblen untergeordneten Elementen.
Du kannst schnapp dir das Clonable hier, und schreib deine Fragen in die Kommentare, falls du sie nach dem Auschecken des Projekts noch hast und Video. Ich hinterlasse auch einen Link zu der Originalticker klonbar Ich spreche darüber in dem Video, das mich dazu veranlasst hat, dieses zu bauen. Es ist auch ein gutes Beispiel. Vergessen Sie zum Schluss nicht, auszuchecken Unsere anderen Anleitungen und klonbar.