Animation

Bild Guckloch Effekt: CSS Maskierung in Webflow nutzen

Level:

Profi 💪

Das Video kann nur angezeigt werden, wenn Cookies erlaubt sind.

Cookies akzeptieren und Medien laden

Ergebnis anschauen

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

Im Webflow Designer öffnen und klonen

https://preview.webflow.com/preview/webflow-lernen?utm_medium=preview_link&utm_source=designer&utm_content=webflow-lernen&preview=25ac349dc1edd443449a3691e0fb6d60&pageId=609ecc8b79a0650bb387960c&workflow=preview

Im Webflow Designer öffnen und klonen

Affiliate Link

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.

‍

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

‍