Beim Herumbasteln im alten Zen Garden bin ich auf einen ziemlich netten kleinen Effekt für unterstrichene Links gestoßen. Wir haben schon einmal darüber gesprochen, aber nie unter Einbeziehung von Animationen.
Ein „animierter Link“ ist ein Link mit einer gepunkteten Unterstreichung, die durch ein Hintergrundbild erzeugt wird. Beim Rollover oder im aktiven Zustand werden die Punkte animiert und beginnen zu laufen. Dies geschieht durch einen einfachen Bildwechsel beim Hover- oder Aktivzustand, wobei beide Hintergrundbilder aus einer einzigen, super-einfachen 3-Pixel-Photoshop-Datei erstellt werden.
Der normale Zustand erhält die nicht animierte Version, der Hover- und Aktivzustand erhalten die animierte Version.
a, a:visited {
background: url(images/dot.gif) repeat-x center bottom;
text-decoration: none;
padding-bottom: 2px;
color: #900;
}
a:hover, a:active {
background: url(images/dotwalk.gif) repeat-x center bottom;
}Schauen Sie sich das Beispiel an, um es in Aktion zu sehen.
Cool. Wäre es nicht besser, wenn die beiden GIF-Dateien zu einer zusammengefasst wären?
Ich stimme Lim zu. Verwenden Sie die Sliding-Door-Methode für das Bild und wechseln Sie zwischen einer statischen und einer animierten Version. Es wäre genauso einfach zu produzieren.
Interessante Verwendung eines Rollovers. Erinnert mich an all die verrückten GIFs, die Leute 1997 überall auf ihren Seiten hatten und immer noch haben *hust* MySpace *hust*.
@Chad, das Bild wäre größer und nicht so leicht zu dehnen. So kann jede Linkgröße verwendet werden.
Vergessen Sie den :focus-Zustand nicht ;-)
Das ist cool, Chris, das werde ich in meinem neuen Design verwenden :)
Das ist interessant – ich weiß nicht, ob ich es verwenden würde, aber es ist eine clevere Verwendung eines GIFs.
Obwohl es sicher cool ist, mag ich daran nicht, dass es Lärm erzeugt!
Es könnte schön sein, wenn es in bestimmten Bereichen einer Website verwendet wird, nur um diese Bereiche hervorzuheben, sonst wird es laut, wenn es auf allen Links verwendet wird.
Unter dem Gesichtspunkt der Aufmerksamkeitserregung finde ich es eine großartige Möglichkeit, sich von allen anderen abzuheben. Ich denke, die Leute werden sich definitiv an Ihre Website erinnern, da die Links ganz anders aussehen werden als alle anderen.
Was mich an diesen Art von Links stört, ist das Flimmern und die leichte Verzögerung, bevor die Animation zu spielen beginnt. Könnte aber sicherlich nützlich sein…