Viel Spaß mit link hover-Effekte

0
19

Ein designer arbeite ich mit war, präsentiert Kompositionen kürzlich bei einem team-meeting. Sie hatte eine wunderbare Arbeit piecing zusammen das Konzept für ein design-system -, Komponenten, Muster und alles dazwischen, der jeden front-end-Entwickler glücklich.

Aber es gab einen winzig kleinen detail in Ihrer Arbeit, die meine Aufmerksamkeit erregte: den hover-Zustand für die links, war ein kringel.

Standard-link (oben) und der hover-Effekt (unten)

Huh! Nicht nur ich hatte nicht gesehen, dass vor, die Idee hatte auch noch nie mein Sinn gekommen. Stellt sich heraus, es gibt viele Instanzen, die auf live-Websites, Die Gliederung. Das war das eine, die Umsetzung, inspiriert das design.

Cool, dachte ich. Wir können etwas tun, wie ein linearer hintergrund-Farbverlauf oder sogar ein Hintergrundbild. Aber! Das war nicht das Ende des Designs. Stellt sich heraus, es ist ebenfalls animiert. Wieder aus Der Gliederung:

Screenshot aus Der Gliederung Artikel (Quelle)

Whoa! Das ist ziemlich wild. Ich war mir nicht sicher, wie Sie dabei Vorgehen, ganz ehrlich, da animieren jeder von meinen anfänglichen Ideen wäre schwierig, vor allem für cross-browser-Unterstützung.

Also, wie Der Gliederung zu tun? Stellt sich heraus, es ist SVG. Wir können einen schlängelnden Pfad, und animieren Sie es ziemlich leicht:

Finden Sie den Stift Kringel von Geoff Graham (@geoffgraham) auf CodePen.

Aber wie funktioniert das mit einem link? Gut, wir können SVG auf die background-image-Eigenschaft:

Finden Sie den Stift Kringel von Geoff Graham (@geoffgraham) auf CodePen.

Aber das ist irgendwie beschissen, weil wir nicht wirklich animieren. Wir brauchen bessere Werte. Jedoch, wir können inline-CSS direkt auf die SVG, die in der Eigenschaft background-image. Können wir nicht einfach kopieren und einfügen von SVG-code in das Eigentum, aber wir können mit einigen richtigen Codierung:

Finden Sie den Stift Kringel von Geoff Graham (@geoffgraham) auf CodePen.

Und, da SVG enthalten können Ihre eigenen Stile in das markup, die animation geworfen werden kann gibt es rechts in der background-image-Eigenschaft auf die gleiche Weise, die wir tun würden, es mit CSS in ein HTML-Dokument Kopf-oder inline-CSS in HTML.

Finden Sie den Stift Kringel von Geoff Graham (@geoffgraham) auf CodePen.

Wir können es Stil ein wenig anders, wenn wir möchten:

Finden Sie die Stift-Verbindung Effectz – Kringel von Geoff Graham (@geoffgraham) auf CodePen.

Das ist inspirierend!

Ich habe keine Ahnung, ob eine animierte Schnörkel sorgt für eine gute user experience und, ehrlich gesagt, das ist nicht der Punkt von diesem post. Der Punkt ist, dass Die Gliederung hatte eine lustige Idee mit einem slick CSS-Implementierung.

Das brachte mich zum nachdenken über andere nicht-standard – (vielleicht auch unkonventionellen) hover styling können wir tun mit links. Wieder warf beiseite usability und haben ein grand ol’ Zeit mit CSS…

Die Grenze zum Hintergrund-Effekt

Vielleicht gleichen unteren Rand auf den default-link kann wachsen und die den gesamten hintergrund von der link-hover:

Finden Sie die Stift-Verbindung Effectz – Hintergrund zu schweben, von Geoff Graham (@geoffgraham) auf CodePen.

Was solls, wir können auch etwas tun, ähnlich wie horizontal:

Finden Sie die Stift-Verbindung Effectz – Horizotonal Hintergrund von Geoff Graham (@geoffgraham) auf CodePen.

Die Skizzierten Text-Effekt

Lassen Sie die Streifen aus der Farbe der Schrift und verlassen einer Kontur hinter sich.

Finden Sie die Stift-Verbindung Effectz -, Umriss-auf hover-von Geoff Graham (@geoffgraham) auf CodePen.

Die Erhöhte Text-Effekt

Eine weitere Idee ist die Anhebung der text, als ob es wächst aus der Seite auf hover:

Finden Sie die Stift-Verbindung Effectz – Angehoben text-hover-von Geoff Graham (@geoffgraham) auf CodePen.

Die Font Swapper-oo-Effekt

Das ist so unpraktisch, dass es macht mich LOL, aber warum nicht:

Finden Sie die Stift-Verbindung Effectz – Swap-schriftart auf hover von Geoff Graham (@geoffgraham) auf CodePen.

Die “Turn it Up, Chris” – Effekt

Tut Mir Leid, Chris. Sie wissen, dass Sie es lieben. ❤️

Finden Sie die Stift-Verbindung Effectz – Turn it up, Chris! von Geoff Graham (@geoffgraham) auf CodePen.

Was können Sie kommen mit?

Ideen haben? Lasst mich in den Kommentaren wissen und ich werde werfen ’em in der CodePen-Sammlung, die ich angefangen habe.