Horizontales Text / Bilder Karussell (ohne Webflow Interaktionen) | Infinite Marquee

Lass Bilder, Logos und Texte mit nur zwei Zeilen CSS Code horizontal durch den Bildschirm wandern. Mit dieser Code-Vorlage musst du nur ein Attribut vergeben.

Horizontales Text / Bilder Karussell (ohne Webflow Interaktionen) | Infinite Marquee
Code-Vorlage
Mit Video-Anleitung
Demo Beispiel enthalten
Mit Text-Anleitung
Diesen Trick und 41 weitere im Bundle kaufen
Für 49 € freischalten
Was ist enthalten?
Vorschau

Ein endloses horizontal durchscrollendes Karussell für Texte und Bilder ohne die Notwendigkeit von Webflow-Interaktionen: Der Webflow-Trick hierbei ist ein CSS-Code aus nur zwei Zeilen. Anwenden kannst du das Infinite Marquee mit dem einfachen vergeben von einem Attribute [karussell=”horizontal”].

Die Vorteile dieser Lösung sind:

  1. Nahtlose Präsentation: Der endlose Effekt schafft eine kontinuierliche Anzeige von Inhalten, die die Aufmerksamkeit der Besucher aufrecht erhält.
  2. Keine Webflow-Interaktionen erforderlich: Die Lösung umgeht die Notwendigkeit, aufwendige Interaktionen zu erstellen, und spart Entwicklungszeit. Der Aufbau kann bei jedem Kundenauftrag wieder verwendet werden.
  3. Kreatives Design: Das endlose Karussell verleiht der Website ein modernes und ansprechendes Erscheinungsbild.
  4. Optimierte User Experience: Besucher können bequem Inhalte konsumieren, ohne manuell auf Schaltflächen klicken zu müssen.
  5. Platzersparnis: Da keine sichtbaren Steuerelemente benötigt werden, bleibt mehr Raum für den eigentlichen Inhalt.
  6. Reduzierte Bounce Rate: Die kontinuierliche Bewegung kann die Verweildauer der Besucher auf der Website erhöhen und die Absprungrate reduzieren.
  7. Einfache Implementierung: Der CSS-Code ermöglicht eine einfache Integration des Karussells in vorhandene Webflow-Projekte. Auch die Dauer des durchrotieren ist einstellbar.

Insgesamt bietet diese Code-Vorlage eine effektive Möglichkeit, ansprechende und dynamische Inhalte auf der Website zu präsentieren. Er verbessert die Benutzerinteraktion, verleiht der Website ein modernes Erscheinungsbild und spart Zeit bei der Entwicklung komplexer Interaktionen.

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

Weitere nützliche Webflow Tricks

Erstes FAQ Accordion standardmäßig geöffnet anzeigen
Freischalten
Erstes FAQ Accordion standardmäßig geöffnet anzeigen

Zeige beim laden einer Seite das erste Element einer FAQ Liste standardmäßig geöffnet an.

Code-Vorlage
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
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
Sammlung an guten Webflow Styleguide-Vorlagen zum klonen (kostenlos)
Kostenlos
Highlight
Freischalten
Sammlung an guten Webflow Styleguide-Vorlagen zum klonen (kostenlos)

Nutze diese kostenlosen Webflow Styleguide Vorlagen für einheitliches, professionelles Website-Design.

Cloneable
Text-Anleitung
Demo Beispiel
Video-Anleitung
Auf ein FAQ Element von einer anderen Seite verlinken und es geöffnet anzeigen
Freischalten
Auf ein FAQ Element von einer anderen Seite verlinken und es geöffnet anzeigen

Verlinke auf ein bestimmtes FAQ-Element von einer anderen Seite aus zu verlinken und es gleichzeitig geöffnet anzuzeigen. Einfach ?faq=3 mit an die URL hängen.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Tabs in Tabs, die auf Mobile zu Dropdown werden
Kostenlos
Freischalten
Tabs in Tabs, die auf Mobile zu Dropdown werden

Eine individuell gestaltete Tabs-in-Tabs-Komponente, die sich auf dem Mobile Breakpoint in eine Dropdown-Komponente verwandelt.

Cloneable
Text-Anleitung
Demo Beispiel
Video-Anleitung
Schnell elegante Mockups aus Screenshots erstellen (kostenlos)
Kostenlos
Freischalten
Schnell elegante Mockups aus Screenshots erstellen (kostenlos)

Einfach bild reinziehen und zwischen Screenshot-Modus, perfekten Browser-Mockups oder Geräten wie iPhone, Tablet und MacBook wählen.

Tool
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
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
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
Webdesign Animations-Inspiration – Godly
Kostenlos
Freischalten
Webdesign Animations-Inspiration – Godly

Jede verlinkte Seite hat eine Video-Vorschau, um schnell zu entscheiden, ob es als Inspiration geeignet ist, oder nicht.

Inspiration
Text-Anleitung
Demo Beispiel
Video-Anleitung
Page Load Animation nur 1x in Webflow abspielen
Highlight
Freischalten
Page Load Animation nur 1x in Webflow abspielen

Erstelle eine Ladeanimation, die nur dann abgespielt wird, wenn der Besucher zum ersten Mal auf die Website kommt und nach Page Reload nicht mehr.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung