Autoplay Marquee: Scrollender Text Effekt für dein Portfolio – Tutorial
Learn how to create an infinite looping vertical marquee in Webflow to showcase dynamic text—perfect for displaying course attendees or skills for your portfolio page. We’ll also cover adding a floating box overlay with autoplaying image slides. Bright and dark version is included in the free Webflow cloneable.
I’ll walk you through the process step-by-step. This is a great way to add a dynamic, modern touch to your website.
Präsentiere deine Portfolio Serviceleistungen eindrucksvoll mit einer Webflow-Marquee
In diesem Beitrag erfährst du, wie du eine looping vertikale Marquee in Webflow umsetzt. Dadurch kannst du beispielsweise deine Serviceleistungen oder andere Informationen eindrucksvoll präsentieren. Zusätzlich integrieren wir einen autoplay Slider über dem Marquee, um das Design noch lebendiger zu gestalten.
Was ist ein Marquee?
Ein Marquee ist eine Animationstechnik, bei der Text oder andere Inhalte kontinuierlich in eine bestimmte Richtung scrollen – entweder horizontal oder vertikal. Dieses Feature wurde früher oft mit dem <marquee>-Tag in HTML umgesetzt (das mittlerweile veraltet ist), kann aber heute mit CSS-Animationen oder JavaScript realisiert werden.
In Webflow bedeutet eine Marquee-Animation in der Regel eine sich endlos wiederholende Bewegung von Inhalten wie Texten, Logos oder Bildern. Sie eignet sich besonders gut für dynamische Elemente wie:
- Laufende Ticker mit News oder Angeboten
- Scrolling-Listen von Testimonials oder Kundennamen
- Endlos rotierende Logos oder Serviceleistungen in einem Portfolio
Warum eine vertikale Marquee?
Eine durchlaufende Text- oder Bilderleiste bietet dir gleich mehrere Vorteile. Du kannst damit aktuelle Updates oder wichtige Inhalte dauerhaft sichtbar machen, ohne dass User scrollen müssen. Außerdem wirkt ein solcher Effekt dynamisch und lenkt sofort Aufmerksamkeit auf das, was du hervorheben möchtest.
Schritt-für-Schritt zur Marquee
- Lege zunächst eine Section in Webflow an und füge darin eine Wrapper-Div ein, die alle Elemente enthält.
- Binde deine gewünschten Inhalte (z. B. Namen) als Collection List ein. Achte darauf, die Einträge so zu sortieren, dass neue Einträge zuerst erscheinen.
- Nutze Custom CSS, um den Text vertikal und kontinuierlich scrollen zu lassen. In vielen Fällen musst du eine Animation definieren, die von
0%zu100%verläuft. - Dupliziere die Collection List, damit die Einträge unendlich weiter loopen, ohne eine sichtbare Lücke zu hinterlassen.
- Füge eine Overlay-Div hinzu, um überlange Einträge weich auszublenden und damit ein sauberes Erscheinungsbild zu erhalten.
- Platziere optional eine Box über der scrollenden Liste, in der du Symbole, Bilder oder zusätzliche Texte unterbringen kannst. Eine einfache Möglichkeit ist, einen Slider zu verwenden, der immer wieder durch verschiedene Elemente wechselt.
Anpassung von Schriftgrößen und Responsive Design
Damit deine Schrift bei größeren Bildschirmen nicht zu groß skaliert oder abgeschnitten wird, kannst du container queries nutzen. Auf diese Weise passt sich die Schrift an die Breite des Wrappers an und bleibt lesbar.
Abschließende Tipps
Wenn du die Marquee nicht dauerhaft abspielen möchtest, kannst du den Wert im Attributfeld (z. B. “vertical”) einfach entfernen. Damit stoppt die Animation, und du erhältst einen statischen Textblock.
Hole dir das kostenlose Template
Du möchtest direkt loslegen, ohne alles selbst bauen zu müssen? Dann lade dir das kostenlose Cloneable aus der Videobeschreibung herunter und passe es ganz nach deinem Geschmack an.
