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.

Page Load Animation nur 1x in Webflow abspielen
Code-Vorlage
Mit Video-Anleitung
Demo Beispiel enthalten
Mit Text-Anleitung
Diesen Trick und 43 weitere im Bundle kaufen
Für 49 € freischalten
Was ist enthalten?
Vorschau

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

Eine einprägsame und fesselnde Intro-Animation kann den ersten Eindruck einer Website erheblich verbessern. Aber nach dem ersten Besuch kann sie als störend empfunden werden. Hier kommt ein genialer Code für Webflow ins Spiel: Er ermöglicht das Abspielen der Intro-Animation nur beim ersten Besuch der Website. Bei nachfolgenden Besuchen oder Seiten-Reloads wird die Animation nicht erneut angezeigt. Beispiel: Kunde braucht eine coole Intro Animation beim laden der Startseite. Diese soll aber nicht mehr angezeigt werden, sobald der Seitenbesucher erneut auf die Startseite kommt.

Die Vorteile dieser Lösung sind vielfältig:

  1. Beeindruckender erster Eindruck: Die Intro-Animation sorgt dafür, dass Besucher sofort in den Bann gezogen werden und die Website positiv wahrnehmen.
  2. Verbesserte Nutzererfahrung: Nach dem ersten Besuch wird die Website schneller geladen, da die Animation nicht erneut abgespielt wird.
  3. Reduzierter Ablenkungsfaktor: Für wiederkehrende Besucher wird die Intro-Animation als störend empfunden. Dieser Code eliminiert diese Ablenkung.
  4. Professionelles Erscheinungsbild: Die Möglichkeit, Intro-Animationen gezielt zu steuern, verleiht deiner Website ein professionelles und durchdachtes Design.
  5. Einfache Implementierung: Dieser Code lässt sich einfach über Webflow-Attribute einbinden und erfordert keine aufwendigen Skripte oder Programmierkenntnisse.
  6. Individualität: Du kannst die Intro-Animation so gestalten, dass sie perfekt zum Stil und Inhalt deiner Website passt.

Insgesamt bietet dieser Code die Möglichkeit, den ersten Eindruck deiner Website zu optimieren, ohne die Nutzererfahrung für wiederkehrende Besucher zu beeinträchtigen. Ein intelligenter Weg, um Aufmerksamkeit zu erregen und gleichzeitig eine schnelle und benutzerfreundliche Website bereitzustellen.

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

Weitere nützliche Webflow Tricks

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
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
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
Bilder in Webflow in zwei Stufen groß ran zoomen
Kostenlos
Freischalten
Bilder in Webflow in zwei Stufen groß ran zoomen

Vorlage um in Webflow ein hochauflösendes Bild in zwei Stufen ran zu zoomen. Ähnlich wie der Galerie Effekt auf medium.com

Cloneable
Text-Anleitung
Demo Beispiel
Video-Anleitung
Webflow Slider bei einem bestimmten Slide starten lassen
Highlight
Freischalten
Webflow Slider bei einem bestimmten Slide starten lassen

Entscheide welcher Slide beim laden der Seite zuerst angezeigt werden soll. Einfach über Attributes editierbar.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
CMS Rich-Text Bullet Liste mit eigenem Icon (spart dir CMS fields)
Freischalten
CMS Rich-Text Bullet Liste mit eigenem Icon (spart dir CMS fields)

Ersetze die Standard CSM Rich-Text-Bullet-Liste in Webflow mit eigenen SVG-Icons, die sich automatisch skalieren. Perfekt für individuell gestaltete Aufzählungen.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Ändere die standard Browser Hintergrundfarbe wenn Text markiert wird
Freischalten
Ändere die standard Browser Hintergrundfarbe wenn Text markiert wird

Passe die Standard-Hintergrundfarbe des Browsers an, wenn Text markiert ist, und steuere diese mit deinen Webflow Variablen.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Video Playback in einem Popup bei schließen stoppen
Freischalten
Video Playback in einem Popup bei schließen stoppen

Dieser Code stoppt automatisch das weitere abspielen eines Videos in einem Popup / Modal Fenster, sobald dieses geschlossen wird.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Im Browser Hintergrund von Bildern entfernen und als PNG runterladen
Freischalten
Im Browser Hintergrund von Bildern entfernen und als PNG runterladen

Nutze ich häufig wenn es bei Kundenaufträgen mal schnell gehen muss. Funktioniert natürlich am besten bei Objekten, die einen neutraleren Hintergrund haben.

Tool
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
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
JavaScript Breakpoints für Webflow
Freischalten
JavaScript Breakpoints für Webflow

Wenn du mit zusätzlichem Custom Code in Webflow arbeitest, soll dieser auch manchmal nur bei einem bestimmten Breakpoint ausgegeben werden. Dieser Code hilft dir dabei.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung