Animation

Kreis der Mauszeiger verfolgt – Webflow Tutorial

Level:
Fortgeschritten 👍
Das Video kann nur angezeigt werden, wenn Cookies erlaubt sind.
Cookies akzeptieren und Medien laden

In diesem Webdesign Tutorial zeige ich dir, wie du einen Kreis oder in meinem Fall einen Licht-Effekt mit einem Verlauf erstellen kannst, der in einem bestimmten Bereich den Cursor / Mauszeiger verfolgt.

Ich habe die Interaktion ganz dezent im Hintergrund in meiner Preistabelle integriert. Im Tutorial selber sind so komische Kreis-Artefakte zu sehen, die sind in echt natürlich nicht da. Das hat sich durch die Bildschirmaufnahme reingeschlichen.

Kleine Details machen eine Website besonders und heben sie vor allem von vielen anderen „normalen” Website-Templates ab. Mit Webflow kannst du wunderbar viele Effekte sehr einfach und schnell in deiner Website umsetzen. Und wenn du nicht das CMS von Webflow nutzen möchtest, sogar einfach mit einem Klick den Code exportieren und z.B. in dein Wordpress Projekt einbinden.

Kapitel

00:00 – Intro
01:04 – Licht-Spot Effekt anlegen
06:07 – Problem des Effekts
06:54 – Lösung für das Problem
10:45 – Geschwindigkeit des Effekts optimieren
13:52 – Endergebnis
13:59 – Webflow Online-Kurs

Ergebnis anschauen
Icon für einen externen Link
Projekt im Webflow Designer öffnen
Icon für einen externen Link