While screwing around at the ol’ Zen Garden, I ran into a pretty neat little effect for underlined links. We’ve talked about this before, but never incorporating animation.
A “walking link” is a link with a dotted underline created by a background image. Upon rollover or active state, the dots become animated and begin to walk. This is done with a simple image swap on hover or active state, with both background images being created from the same super-simple 3-pixel Photoshop file:
Regular state get the non-animated version, hover and active state get the animated 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;
}Check out the example to see it in action.
Cool. Wouldn’t it be better if the two GIF files are combined into one?
I agree with Lim. Use the sliding door method on the image and switch between a static and animated version. It would be just as easy to produce.
Interesting use of a rollover. Reminds me of all those crazy gif’s people used to and still do *cough* myspace *cough* all over the place in 1997.
@Chad, the image would be larger and not as easily stretched. This way allows for any size link to be used.
Don’t forget the :focus state ;-)
Thats a cool one Chris, i will be using in my new design :)
That is interesting — I don’t know if I’d use it but it’s a clever use of a GIF.
While it surely is cool, thing I do not like about it is the noise it creates!
It could be nice if used in particular areas on site, just to draw attention to those areas otherwise it will be noisy if used on all links.
From a getting attention prospective, I think it is a great way to separate yourself from all the others. I think people will definitely remember your website since the links will look totally different from all the others.
The things that annoys me about these kind of links is the flickering it causes and the slight delay you experience, before the animation starts playing. Could surely be useful though…