Ha det gøy med link sveve virkninger

0
31

En designer jobber jeg med var å presentere comps på en nylig team møte. Hun hadde gjort en fantastisk jobb å sette sammen konseptet for en design-systemet, fra komponenter til mønstre og alt i mellom som ville gjøre noen front-end utvikler lykkelig.

Men det var en teeny lille detalj i hennes arbeid som fanget mitt øye: hover staten for lenker var en squiggle.

Standard kobling (øverst) og hover effekt (nederst)

Ikke sant! Ikke bare hadde jeg ikke sett det før, tanken hadde aldri streifet meg. Det viser seg at det er mange forekomster av det på live-nettsteder, er Disposisjonen. Det var en som var gjennomføringen som har inspirert design.

Kult, jeg skjønte. Vi kan gjøre noe som en lineær gradient bakgrunn eller bakgrunnsbilde. Men! Det var ikke enden på design. Det viser seg at det er animert, så vel. Igjen, fra Den Skissen:

Skjermbilde fra Omrisset artikkelen (kilde)

Whoa! Det er ganske vilt. Jeg var ikke sikker på hvordan å nærme som, ærlig, fordi animere noen av mine første ideer ville være vanskelig, spesielt for kryss-nettleser støtte.

Så, hvordan gjorde Disposisjonen gjøre det? Slår ut, er det SVG. Vi kan gjøre en squiggly banen og animere det ganske enkelt:

Se Penn Squiggle av Geoff Graham (@geoffgraham) på CodePen.

Men hvordan gjør man det med en link? Vel, vi kan bruke SVG på background-image eiendom:

Se Penn Squiggle av Geoff Graham (@geoffgraham) på CodePen.

Men det er ganske crappy fordi vi ikke kan virkelig levende. Vi trenger bedre verdier for det. Men, vi kan inline CSS direkte på SVG i bakgrunnen-bilde eiendom. Vi kan ikke bare kopiere og lime inn SVG-koden inn i holderen, men vi kan med noen riktig koding:

Se Penn Squiggle av Geoff Graham (@geoffgraham) på CodePen.

Og, siden SVG kan inneholde sine egne stiler i markup, animasjon kan bli kastet rett i bakgrunnen-bilde eiendom, på samme måte som vi ville gjøre det med CSS i et HTML-dokument hodet eller inline CSS i HTML.

Se Penn Squiggle av Geoff Graham (@geoffgraham) på CodePen.

Vi kan style den opp litt annerledes, hvis vi ønsker:

Se Penn Link Effectz – Squiggle av Geoff Graham (@geoffgraham) på CodePen.

Dette er inspirerende!

Jeg har ingen idé om en animert squiggle gjør for en god brukeropplevelse, og, ærlig talt, det er ikke poenget med dette innlegget. Poenget er at Disposisjonen hadde en morsom idé med en glatt CSS implementasjon.

Som fikk meg til å tenke på andre som ikke er standard (kanskje til og med ukonvensjonelle) hold styling vi kan gjøre med lenker. Igjen, kaste til side brukervennlighet og har en grand ol’ tid med CSS…

Grensen til Bakgrunnen Effekt

Kanskje det samme nedre grense på standard link kan vokse og bli full bakgrunn av koblingen på hover:

Se Penn Link Effectz – Bakgrunn på hold av Geoff Graham (@geoffgraham) på CodePen.

Pokker, kan vi selv gjøre noe lignende horisontalt:

Se Penn Link Effectz – Horizotonal Bakgrunn av Geoff Graham (@geoffgraham) på CodePen.

Den Skisserte Tekst Effekt

La oss kle ut skriftfarge og la en oversikt bak.

Se Penn Link Effectz – Omriss på hold av Geoff Graham (@geoffgraham) på CodePen.

Hevet Tekst Effekt

En annen idé er å heve den teksten som om det vokser ut av siden på hover:

Se Penn Link Effectz – Hevet tekst på hold av Geoff Graham (@geoffgraham) på CodePen.

Skrift-Bytter-oo Effekt

Dette er så upraktisk at det gjør meg LOL, men hvorfor ikke:

Se Penn Link Effectz – Swap skrift på hold av Geoff Graham (@geoffgraham) på CodePen.

“Slå det Opp, Chris” – Effekt

Beklager, Chris. Du vet at du elsker det. ❤️

Se Penn Link Effectz – Slå det opp, Chris! av Geoff Graham (@geoffgraham) på CodePen.

Hva kan du komme opp med?

Har du noen ideer? Gi meg beskjed i kommentarfeltet, og jeg vil kaste ’em i CodePen samling jeg har begynt.