Animation

Bild Guckloch Effekt: CSS Maskierung in Webflow nutzen

Level:
Profi 💪

Ich war auf der Suche nach einer Lösung, um einen Kreis als Guckloch über ein Bild bewegen zu lassen, so dass das drunterliegende Bild sichtbar wird. Der Kreis bewegt sich on Mouse Movement – verfolgt also magnetisch den Mauszeiger.

Da man in Webflow Animation keine Position top / left oder CSS Masken beeinflussen kann, muss ein wenig custom Code hinzugefügt werden. Dafür habe ich folgenden externen Code verwendet: https://stackoverflow.com/questions/63227926/move-clip-path-position-to-mouse-cursor.

Effekt Vorschau:
https://webflow-lernen.webflow.io/peephole-image-mask-effect-in-webflow


Direkt im Webflow Designer öffnen:
Projekt klonen

Ein weiterer nützlicher Artikel von CSS-Tricks zum Thema Mask-Position hat mir geholfen das ganze zu verstehen:
https://css-tricks.com/almanac/properties/m/mask-position

Der Effekt ist ähnlich wie auf der Seite von Vanmoof:
https://www.vanmoof.com/de-DE/s3?color=dark
oder auf https://www.canoo.com/canoo