Lag dynamisk hover-animasjon

Med CSS Custom properties og litt JavaScript-magi.

Jørgen Jacobsen fagredaktør, kode24

Publisert 07.12.2018 - 05:58

Alle kan lage en standard statisk hover-effekt på elementer. Du vet, den typen hvor man holder musepekeren over et element, og så kommer det for eksempel en liten animert bakgrunnsskygge.

Kodesnutt 👓

Kodesnutt er Youtube-kanalen til utvikleren Mikael Brevik; kjent fra blant annet podkasten og meetup-en BartJS.

kode24 får videreformidle videoene, men følg også kanalen på Youtube, eller på kodesnutt.io.

All kode finner du på Kodesnutt sin Github-side.

Men hva hvis du vil skape en mer dynamisk opplevelse? Hva med noe ala det man finner på for eksempel Apple TV, hvor animasjonen endrer seg dynamisk etter hvor på elementet man peker?

I denne ukas kodesnutt viser Mikael Brevik hvordan man bruker CSS Custom Properties, også kjent som CSS-variabler, sammen med litt JavaScript for å oppnå en mer dynamisk effekt.

Koden er i ren JavaScript uten noen fancy rammeverk eller verktøy.

Nysgjerrig på å se hvordan det fungerer i praksis? Ta en titt i koden under:

See the Pen Animated background offset by Mikael Brevik (@mikaelbr) on CodePen.