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
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
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
Webflow Lightbox Schließen-Button stylen
Freischalten
Webflow Lightbox Schließen-Button stylen

Dieser CSS Code überschreibt das Standard-Design von Webflow, welches jedem Lightbox-Schließen-Button mitgegeben wird. Du kannst es mit deinem eigenen Icon versehen.

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
Overflow auto (horizontal scrollen) mit vor und zurück Button
Highlight
Freischalten
Overflow auto (horizontal scrollen) mit vor und zurück Button

Wenn du mit horizontal scrollbaren Sektionen arbeitest, solltest du vorwärts und rückwärts Button hinzufügen, die der User als Backup klicken kann, da nicht jede Maus horizontal scrollen kann.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Automatisch nofollow zu externen Links in Webflow hinzufügen (Rich-Text, Blog etc)
Freischalten
Automatisch nofollow zu externen Links in Webflow hinzufügen (Rich-Text, Blog etc)

Automatisiert 'rel=nofollow' Attribut bei allen Links in Richt-Text-Elementen hinzufügen. Spart Zeit und verbessert SEO.

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
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
Webflow Lightbox Hack: Gruppen-Slugs per JavaScript steuern
Freischalten
Webflow Lightbox Hack: Gruppen-Slugs per JavaScript steuern

Ein Trick, der dir zeigt, wie du in Webflow mehrere unabhängige Lightbox-Galerien mit dynamischen CMS-Gruppennamen erstellst, ohne dass sie sich in einer Gruppe öffnen.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung