Lag dynamisk hover-animasjon

Med CSS Custom properties og litt JavaScript-magi.

📽: Mikael BrevikVis mer Vis mer Vis mer

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.

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: