Video Play Button der Mauszeiger verfolgt – Webflow Tutorial

Ein magnetischer Video Play Button der on hover auf einem Background-Video erscheint und den Mauszeiger verfolgt. Bei Klick öffnet sich dann eine Lightbox mit dem Video.
Der Play Button dreht sich zusätzlich leicht in die Richtung, in die der Cursor sich bewegt. Das verleiht der Animation eine zusätzliche Leichtigkeit.

Ergebnis anschauen:
https://magnetic-video-play-button.webflow.io

Im Webflow Designer öffnen und klonen:
https://webflow.com/website/Magnetic-Video-Play-Button-following-the-Cursor

---------------------------------------------

► Mein Webflow Online-Kurs: Lerne Webseiten für Kunden Schritt für Schritt professionell umzusetzen (ohne Programmierkenntnisse!):
https://bit.ly/webflow-online-kurs

---------------------------------------------

Webflow schnell und einfach lernen:
https://webflow-lernen.de/tutorials

Über diesen Link Webflow kostenlos testen:
http://bit.ly/webflow-testen *

---------------------------------------------

// TIMESTAMPS

00:00 – Intro
00:44 – Aufbau in Webflow
05:38 – Cursor Tracking Bereich anlegen
07:44 – Play Button mit Cursor bewegen
08:54 – Play Button ein / aus faden
11:28 – Play Button bei Bewegung drehen
12:51 – Responsive machen

#webflow #websitedesign #webdesign
---------------------------------------------

// PATREON

► Unterstütze meinen Kanal auf Patreon (mehrere Podcast Sonderfolgen und Webflow Tutorials pro Monat): http://bit.ly/patreon-seite

----------------------------------------------

// MEIN WEBDESIGN UND FREELANCER BLOG

► https://jonasarleth.com/blog

----------------------------------------------

// SOCIAL MEDIA

► Instagram: https://instagram.com/jonasarleth
► Dribbble: https://dribbble.com/jonasarleth
► LinkedIn: https://www.linkedin.com/in/jonasarleth

----------------------------------------------

// MEIN WEB & DESIGN PODCAST

► iTunes: https://jonasarleth.com/itunes
► Spotify: https://jonasarleth.com/spotify
► Pocket Casts: https://jonasarleth.com/pocketcasts
► SoundCloud: https://jonasarleth.com/soundcloud
► Overcast: https://jonasarleth.com/overcast
► Stitcher: https://jonasarleth.com/stitcher

----------------------------------------------

* Affiliate Links