Autoplay Webflow Tabs

Passe Webflow Tabs mithilfe von Attributen so an, dass sie automatisch nach einer festgelegten Zeit zum nächsten Tab wechseln (mit animierter Tab-Bar).

Autoplay Webflow Tabs
Code-Vorlage
Mit Video-Anleitung
Demo Beispiel enthalten
Mit Text-Anleitung
Diesen Trick und 40 weitere im Bundle kaufen
Für 49 € freischalten
Was ist enthalten?
Vorschau

Die Standard-Tab-Komponente von Webflow unterstützt kein automatisches Durchlaufen der Tabs (Autoplay). In diesem Webflow Trick stelle ich dir einen Code zu Verfügung, der es ermöglicht, die Webflow Tabs mithilfe von Attributen so anzupassen, dass sie automatisch nach einer festgelegten Zeit zum nächsten Tab wechseln. Diese Anpassung ist kinderleicht über Attribute editierbar.

Mit diesem Code wird nicht nur das Autoplay für Webflow Tabs realisiert, sondern auch eine animierte Tab-Leiste integriert. Diese zeigt an, wie lange ein Tab noch aktiv ist, bevor er automatisch zum nächsten Tab übergeht. Das Ganze erfolgt im Code, ohne dass eine separate Webflow-Interaktion erstellt werden muss.

Diese Funktionalität ermöglicht eine benutzerfreundliche Navigation durch Tabs, ohne dass Nutzer manuell wechseln müssen. Sie ist besonders nützlich, um Inhalte schrittweise zu präsentieren oder Informationen chronologisch darzustellen. Der JavaScript und CSS Code sorgt für eine optimierte Nutzererfahrung und gestaltet die Interaktion mit Tabs intuitiv und ansprechend.

Vorteile dieser Lösung:

  1. Automatisierte Präsentation: Mit dem Autoplay können Nutzer Inhalte in Tabs automatisch durchlaufen lassen, ohne manuell zwischen ihnen wechseln zu müssen.
  2. Zeitgesteuertes Browsing: Durch das Festlegen einer Zeit können Informationen schrittweise präsentiert werden. Dies ist besonders nützlich für Tutorials, Anleitungen oder Storytelling, wo Inhalte nach und nach enthüllt werden sollen.
  3. Intuitive Interaktion: Die automatische Animation der Tab-Leiste zeigt an, wie lange ein Tab aktiv bleibt. Dies ermöglicht es den Nutzern, den Kontext zu verstehen und die Inhalte im richtigen Timing aufzunehmen.
  4. Spart Nutzerzeit: Indem Inhalte automatisch abgespielt werden, wird die Zeit reduziert, die Nutzer für das manuelle Wechseln zwischen Tabs aufwenden würden.
  5. Keine zusätzliche Interaktion erforderlich: Die Lösung erfordert keinen Aufwand beim Erstellen separater Webflow-Interaktionen. Der Code übernimmt die Funktionalität und erleichtert die Implementierung.
  6. Flexibilität: Die Möglichkeit, die Autoplay-Zeit anzupassen, ermöglicht eine flexible Anpassung an unterschiedliche Inhalte und Szenarien.

Diesen Trick und 40 weitere im Bundle kaufen
Für 49 € freischalten
Was ist enthalten?

Weitere nützliche Webflow Tricks

Copyright Jahreszahl im Footer automatisch aktualisieren
Kostenlos
Freischalten
Copyright Jahreszahl im Footer automatisch aktualisieren

Copyright Jahreszahl im Footer einer Webflow Website automatisch aktualisieren.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Webdesign Galerie mit ganzen Screenshots – Landbook
Kostenlos
Freischalten
Webdesign Galerie mit ganzen Screenshots – Landbook

Jeder Screenshot beinhaltet eine ganze Website-Seite und nicht nur einen Ausschnitt. Zudem gibt es gute Filtermöglichkeiten.

Inspiration
Text-Anleitung
Demo Beispiel
Video-Anleitung
Tabellen für Rich-Text Inhalte visuell erstellen
Freischalten
Tabellen für Rich-Text Inhalte visuell erstellen

Webflow bietet keine Tabellen-Funktion in Rich Text Elementen. Mit diesem Tool kannst du Tabellen und Inhalte visuell gestalten und den Code als Embed einfügen.

Tool
Text-Anleitung
Demo Beispiel
Video-Anleitung
Mehrere 303 Redirects in Webflow auf einmal anlegen (CSV Upload)
Freischalten
Mehrere 303 Redirects in Webflow auf einmal anlegen (CSV Upload)

Mehrere 303 Redirects in Webflow auf einmal via CSV Upload hochladen.

Tool
Text-Anleitung
Demo Beispiel
Video-Anleitung
7 Effekte um Bilder einzublenden, sobald sie in den Viewport scrollen
Kostenlos
Freischalten
7 Effekte um Bilder einzublenden, sobald sie in den Viewport scrollen

Dieses kostenlose Webflow Cloneable bietet gleich sieben verschiedene Effekte, um einen faszinierenden Bild-Reveal-Effekt zu erzeugen.

Cloneable
Text-Anleitung
Demo Beispiel
Video-Anleitung
Position Sticky innerhalb von overflow auto / hidden
Highlight
Freischalten
Position Sticky innerhalb von overflow auto / hidden

Ein Accordeon mit einer großen Tabelle verwendet "overflow: hidden", während die Tabelle selbst "overflow: auto" nutzt, um sowohl horizontal als auch vertikal gescrollt werden zu können. Eigentlich funktioniert "position: sticky" innerhalb dieser Tabelle nicht mehr, mit dieser Code-Vorlage allerdings schon.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Kleine Kreise und Rechtecke willkürlich auf der Website verteilen (Effekt)
Freischalten
Kleine Kreise und Rechtecke willkürlich auf der Website verteilen (Effekt)

Ein kreativer Effekt, der auch auf der Webflow Conf Website 2022 angewendet wurde. Die Elemente verschwinden automatisch on hover und tauchen wo anders wieder auf.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Scrollen der Seite verhindern wenn eine Webflow Navigation geöffnet ist
Highlight
Freischalten
Scrollen der Seite verhindern wenn eine Webflow Navigation geöffnet ist

Dieser einfache Code, stoppt das Scrollen des Hintergrunds, wenn das Webflow mobile Menü geöffnet ist. Funktioniert auch auf Desktop.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Einmalig ein Info-Banner (Notification Bar) auf der Website anzeigen
Highlight
Freischalten
Einmalig ein Info-Banner (Notification Bar) auf der Website anzeigen

Sobald der Seitenbesucher den Info-Banner weggeklickt, wird er beim nächsten Laden der Website nicht mehr angezeigt, da die Entscheidung mit einem Cookie gespeichert wird. Über Attribute editierbar und ohne externe JS Library.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Hunderte Device Mockups mit Menschen schnell kostenlos erstellen
Freischalten
Hunderte Device Mockups mit Menschen schnell kostenlos erstellen

Falls man für eine Präsentation oder zum einbinden auf der Website mal ein schnelles Mockup braucht (kostenlos). Einfach Screenshot hochladen und High-Res Bild wieder runterladen.

Tool
Text-Anleitung
Demo Beispiel
Video-Anleitung
Eigenen Audio Player komplett in Webflow stylen
Kostenlos
Freischalten
Eigenen Audio Player komplett in Webflow stylen

Custom Audio-Player um auf deiner Webseite Audio-Dateien anzuziegen und zu stream. Der Player kann nach Wunsch in Webflow gestaltet werden.

Cloneable
Text-Anleitung
Demo Beispiel
Video-Anleitung
Kostenlose Bilder und Videos für Kundenprojekte – meine Quellen (kommerzielle Zwecke)
Freischalten
Kostenlose Bilder und Videos für Kundenprojekte – meine Quellen (kommerzielle Zwecke)

Liste an Plattformen für kostenloses Bild- und Videomaterialien. Nutze ich als Webdesigner bei jedem Kundenauftrag.

Tool
Text-Anleitung
Demo Beispiel
Video-Anleitung