Het hebben van plezier met een link hover effecten

0
42

Een ontwerper werk ik met de presentatie van comps op een recente bijeenkomst van het team. Zij gedaan had een prachtige baan patchwork samen het concept voor een ontwerp systeem, van de componenten van patronen en alles wat daar tussen in, dat zou een front-end developer gelukkig.

Maar er was een heel klein detail in haar werk dat mijn aandacht trok: de hover staat voor links was een squiggle.

Standaard link (bovenaan) en hover-effect op (bodem)

Huh?! Niet alleen had ik niet gezien, het idee had zelfs nog nooit bij mij opgekomen. Blijkt dat er voldoende exemplaren van het op live sites, wordt De Omtrek. Dat was een uitvoering die de inspiratie was voor het ontwerp.

Cool, dacht ik. Kunnen We iets doen zoals een lineaire gradient achtergrond of zelfs een achtergrondafbeelding. Maar! Dat was niet het einde van het ontwerp. Blijkt het bewegen. Nogmaals, uit Het Overzicht:

Screenshot uit De Omtrek artikel (bron)

Whoa! Dat is behoorlijk wild. Ik was niet zeker hoe benader je die, eerlijk gezegd, omdat het animeren van een van mijn eerste ideeën zou moeilijk zijn, vooral voor cross-browser support.

Dus, hoe was De Omtrek doen? Blijkt, het is SVG. We maken een kronkelig pad en animeren van het vrij eenvoudig:

Zie de Pen Squiggle van Geoff Graham (@geoffgraham) op CodePen.

Maar hoe werkt dat met een link? Goed, we kunnen gebruik maken van SVG op de background-image eigenschap:

Zie de Pen Squiggle van Geoff Graham (@geoffgraham) op CodePen.

Maar dat is een beetje crappy, want we kunnen niet echt animatie. We hebben betere waarden voor. We kunnen echter inline CSS direct op de SVG-in de background-image eigenschap. Kunnen We niet gewoon kopiëren en plakken van de SVG-code in het pand, maar we kunnen met gepaste codering:

Zie de Pen Squiggle van Geoff Graham (@geoffgraham) op CodePen.

En, sinds SVG kan voorzien zijn van een eigen stijlen binnen de opmaak, de animatie kan worden geworpen in de background-image eigenschap, op dezelfde manier zouden we het doen met CSS in een HTML-document hoofd of inline CSS in de HTML-code.

Zie de Pen Squiggle van Geoff Graham (@geoffgraham) op CodePen.

We kunnen stijl een beetje anders, als we willen graag:

Zie de Pen Link Effectz – Squiggle van Geoff Graham (@geoffgraham) op CodePen.

Dit is inspirerend!

Ik heb geen idee of een geanimeerde squiggle zorgt voor een goede gebruikerservaring, en eerlijk gezegd, dat is niet het punt van deze post. Het punt is dat De Contour had een leuk idee met een gladde CSS implementatie.

Dat zette me aan het denken over andere niet-standaard (misschien zelfs onconventionele) beweeg styling we kunnen doen met links. Nogmaals, het gooien van opzij bruikbaarheid en hebben een grand ol’ time met CSS…

De Grens van de Achtergrond-Effect

Misschien is dat dezelfde onderrand van de standaard koppeling kan groeien en de volledige achtergrond van de link op de zweeftekst kan oproepen:

Zie de Pen Link Effectz – Achtergrond zweven door Geoff Graham (@geoffgraham) op CodePen.

Ach, we kunnen zelfs iets soortgelijks doen horizontaal:

Zie de Pen Link Effectz – Horizotonal Achtergrond van Geoff Graham (@geoffgraham) op CodePen.

Het Beschreven Effect Van De Tekst

Laat de strip uit het lettertype, de kleur en laat een overzicht achter.

Zie de Pen Link Effectz – Overzicht op zweven door Geoff Graham (@geoffgraham) op CodePen.

Het Verhoogde Effect Van De Tekst

Een ander idee is om de tekst als het groeit uit van de pagina op de zweeftekst kan oproepen:

Zie de Pen Link Effectz – Verhoogd tekst op zweven door Geoff Graham (@geoffgraham) op CodePen.

Het Lettertype Swapper-oo-Effect

Dit is zo onpraktisch dat het me een LOL, maar waarom niet:

Zie de Pen Link Effectz – Swap lettertype op zweven door Geoff Graham (@geoffgraham) op CodePen.

De “Turn it Up, Chris” Effect

Sorry, Chris. Je weet dat je liefde. ❤️

Zie de Pen Link Effectz – Turn it up, Chris! door Geoff Graham (@geoffgraham) op CodePen.

Wat kun je bedenken?

Heeft u ideeën? Laat het me weten in de comments en ik zal het gooi ’em in de CodePen collectie die ik ben begonnen.