Zahlen animiert hochzählen mit ease-out Effekt (wenn im Viewport)

Mit diesem JavaScript-Code kannst du Zahlen auf deiner Website animiert hochzählen lassen, und das mit einem sanften "ease-out" Effekt.

Zahlen animiert hochzählen mit ease-out Effekt (wenn im Viewport)
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

Mit diesem JavaScript-Code kannst du Zahlen auf deiner Website animiert hochzählen lassen, und das mit einem sanften "ease-out" Effekt, wenn sie im Viewport erscheinen. Die Anwendung ist einfach und erfordert nur die Zuweisung von Attributen. Über ein Attribut "Duration" kannst du die Dauer der Animation einstellen.

Vorteile dieses Tricks:

  1. Aufmerksamkeit erregen: Animiertes Hochzählen von Zahlen zieht die Aufmerksamkeit der Besucher auf sich und kann dazu beitragen, wichtige Informationen hervorzuheben, wie beispielsweise Statistiken oder Preise.
  2. Visuelle Dynamik: Die Animation verleiht deiner Website eine visuelle Dynamik und sorgt für eine interaktive Erfahrung, die die Benutzerbindung verbessern kann.
  3. Verbesserte Benutzererfahrung: Durch die Animation wird der Inhalt lebendiger und ansprechender gestaltet, was die Benutzererfahrung insgesamt verbessert und dazu beiträgt, dass Besucher länger auf der Seite verweilen.
  4. Einfache Implementierung: Die Anwendung des Codes über Attribute macht die Implementierung unkompliziert und ermöglicht eine schnelle Integration in bestehende Webflow-Projekte.
  5. Verbessertes Design: Die Animation fügt dem Design eine zusätzliche Ebene hinzu und trägt dazu bei, dass deine Website modern und ansprechend aussieht.

Insgesamt bietet diese Animation eine einfache Möglichkeit, deine Website zu verbessern und wichtige Informationen auf eine ansprechende und interaktive Weise darzustellen.

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

Weitere nützliche Webflow Tricks

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
Lazy Loading Background Videos in Webflow
Highlight
Freischalten
Lazy Loading Background Videos in Webflow

Viele Background Videos auf einer Website führen zu einer hohen Netzwerknutzlast und schlechteren Page-Speed Score. Dieser Code hilft dir dabei, Videos erst zu laden, sobald sie im Viewport des Seitenbesuchers sind.

Code-Vorlage
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
Vimeo Video Playlist mit Webflow CMS erstellen
Kostenlos
Freischalten
Vimeo Video Playlist mit Webflow CMS erstellen

Erstelle ansprechende Vimeo Videoplaylists mithilfe dieses Webflow Cloneables. Nutzt die Vimeo API. Ideal für Tutorials und Kurse.

Cloneable
Text-Anleitung
Demo Beispiel
Video-Anleitung
Horizontal Sektion scrolling Parallax Bilder Effekt (Webflow Interactions)
Kostenlos
Freischalten
Horizontal Sektion scrolling Parallax Bilder Effekt (Webflow Interactions)

Ein Effekt, welcher eine Sektion horizontal über den Screen scrollt und gleichzeitig Bilder hinter einem Fenster parallax bewegt. Ohne Custom Code!

Cloneable
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
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
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
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
Zahlen animiert hochzählen mit ease-out Effekt (wenn im Viewport)
Freischalten
Zahlen animiert hochzählen mit ease-out Effekt (wenn im Viewport)

Mit diesem JavaScript-Code kannst du Zahlen auf deiner Website animiert hochzählen lassen, und das mit einem sanften "ease-out" Effekt.

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
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