How To Make Walking Links
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.
Loading ...
1
Cool. Wouldn’t it be better if the two GIF files are combined into one?
Comment by Lim Chee Aun — January 3, 2008 @ 8:18 pm
2
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.
Comment by Chad Payne — January 3, 2008 @ 8:58 pm
3
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.
Comment by Chris S. — January 3, 2008 @ 9:13 pm
4
@Chad, the image would be larger and not as easily stretched. This way allows for any size link to be used.
Comment by Chris S. — January 3, 2008 @ 9:14 pm
5
Don’t forget the :focus state
Comment by Jeroen Mulder — January 4, 2008 @ 1:10 am
6
Thats a cool one Chris, i will be using in my new design
Comment by Noura Yehia — January 4, 2008 @ 5:09 pm
7
That is interesting — I don’t know if I’d use it but it’s a clever use of a GIF.
Comment by David Walsh — January 6, 2008 @ 5:25 pm
8
While it surely is cool, thing I do not like about it is the noise it creates!
Comment by Jermayn Parker — January 6, 2008 @ 5:32 pm
9
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.
Comment by Noura Yehia — January 7, 2008 @ 4:25 am
10
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.
Comment by Antonio Crutchley — January 14, 2008 @ 1:44 pm
11
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…
Comment by Anders — January 17, 2008 @ 6:04 am