Schreib - Effekt mit Typer.js in Webflow erstellen! 🤗 Headlines mit WOW - Faktor, die überzeugen! скачать в хорошем качестве

Schreib - Effekt mit Typer.js in Webflow erstellen! 🤗 Headlines mit WOW - Faktor, die überzeugen!

Schreib - Effekt mit Typer.js in Webflow erstellen!.. Heute ein weiteres Webflow Tutorial auf die Augen. Im letzten Videopost von Merlin hat er den typer - Effekt in Figma gebaut. Heute die Umsetzung in Webflow. 😎 Mit dem Tyler Effekt können beispielsweise Headlines smooth und präsent animiert werden, um das Augenmerk auf ganz bestimmte Wörter oder Wortgruppen zu legen. So können wichtigen Keywords auf der Website ein wenig „Nachdruck“ verliehen werden. 💪 Hierfür bedarf es etwas Custom Code. Step by step mal zusammenfasst: 1. Script von Typer.js in webflow einfügen. Den Link zur Dokumentation packe ich in die Kommentare. 2. Exakter Wortlaut in einen span (.typer) wrappen 3. Dem .typer span id und custom attributes hinzufügen (siehe doku) 4. Im gleichen Text einen Space ebenfalls als span wrappen (.cursor) 5. Dem .cursor span nötige custom Attributes mitgeben (siehe doku) 6. Um einen „Flicker“ vom native webflow Text und dem durch das script animierten Text zu vermeiden, den Text in Webflow raus löschen und lediglich ein Space übrig lassen That‘s it ✌🏻 Hier die Typer.JS Dokumentation: https://steven.codes/typerjs/ Freue mich auf Feedback zur Animation 😊 ——————————————————————————————————— → UNSERE WEBSITE: www.emti.space Webflow Agentur emti 👨‍💻 Wir entwickeln professionelle und performante Websites, die Kunden bringen statt Nerven rauben. Erstklassiges Webdesign für Unternehmen bei denen Qualität an erster Stelle steht. Wenn du ein cooles Projekt umsetzen möchtest, dann schreib und gern! Mail: hallo@emti.space ——————————————————————————————————— → FOLGE UNS AUF LINKEDIN:   / tim-richter-31186b230   Für weitere spannende Tutorials rund um das Thema Webflow, Webdesign und Figma check gern unser LinkedIn Profil ab. Wir posten hier regelmäßig auch aus unserem täglichen Alltag als Webflow Agentur. ——————————————————————————————————— → FIGMA Figma ist ein kostenloses Tool zum Designen digitaler Produkte, wie zum Beispiel Websites oder Apps. Es besteht die Möglichkeit Figma all umfänglich im Browser zu nutzen. Das wiederum ermöglicht es jedem, der Zugriff auf einen Computer jeglicher Art hat, Figma zu benutzen. Link zu Figma: www.figma.com → WEBFLOW Was ist Webflow? Gute Frage! Grundsätzlich ist Webflow eine SAAS (Software as a Service). Quasi ein Tool, welches online immer erreichbar ist. Mit Webflow kannst du im Browser responsive Websites bauen. Es richtet sich im Kern an Webdesigner, welche ihre Projekte nicht nur gestalten, sondern auch umsetzen wollen. Link zu Webflow: www.webflow.com ——————————————————————————————————— // TIMESTAMPS 00:00 — Einleitung 00:26 — Script einfügen 00:50 — Aufbau in Webflow 02:05 — Custom Attributes einfügen 07:00 — Page Load Animation 08:22 — Zusammenfassung & Outro #webflow #webseite #webdesign #interaction #tutorial #webflowtutorial #figma #webdesigner #uidesign #ui #uiux #ux #uxdesign #animation #interaction #storytelling #typing #typer