Using CSS and GIF’s to animate a menu

June 16, 2008 @ 6:16 pm | Comments (21)

Remember our good old friend the animated gif? There was a time when the ability to animate GIF’s made web sites a little more fun… or horribly obnoxious. It seems that no one really harnessed the power of animated GIFs, and today the only place they seem to be used are in banner advertisements when flash isn’t available.

GIFs can still be a very powerful tool, and the fact that they have been long forgotten gives me an opportunity to brainstorm what you can do with them.

One of the more powerful capabilities of CSS is the use of the :hover pseudo selector. It is one of the only abilities we have to alter the behavior of a website simply through XHML and CSS (and there is a debate if this even should be done, but this is more about capabilities rather than theoretical debates of what should/shouldn’t be done).

Because IE6 has shoddy :hover support on non anchor elements, the most logical place to use this combination of :hover and animated GIFs will be in a menu item. However you could easily use this same technique on any element and just count on the modern browsers being able to take advantage of it.

The Plan

So what we want to do is have an item appear static on the page, until we hover over it. Once hovered it will start a simple animation to enhance the interactivity of the site.

For this example we will be creating a menu, each menu item will have a little glow below it. When someone hovers over it we want the glow to pulse and some stars to rise from it - kinda magical or something along those lines.

THE TECHNIQUE

We will be using CSS Roll-overs to produce this effect. The trick with CSS Roll overs is to create an image that has both image states (the non-hover state and the hover state) in the same image. Then when you hover over the link it shifts the background-position of the roll over to reveal the hover state below.

The static menu example

Here is an example of the normal state (the left side), and the hover state (the right side)

We use this method over a different image on the hover state because many browsers get a flicker the first time you switch the images.

The basic code:


#main_nav a {
	display: block;
	width: 150px;
	height: 150px;
	background: url(menu.gif); }

#main_nav a:hover { background-position: -150px 0; }

Essentially all you do is shift the background image one cell over (150pixels, the width of the tab) and it shows the hovered state.

THE ANIMATION

Using photoshop we can pretty easily create an animated GIF. I am not going to teach you how to do it, but if you don’t know how read this tutorial. Now what we are going to do is create an animated gif of the same navigation tab above, but only have one side/state animated.

We end up creating 15 frames which the animation cycles through, here are a few so you get the idea:

When the item isn’t hovered on it looks stationary, despite the fact that the hidden area is in an animated loop the whole time. When we hover over the item it pulls the animated portion into view where it causes the stars to move upward and the glow to pulse.

THE LIMITATIONS

Because we can only set it to either loop once (which it loops immediately and we miss it) or repeat we can only do animations that have a seamless loop. Additionally since the animation is looping all the time we are somewhat limited in the animation because someone might hover over the element at the furthest frame from the start creating a bit of a jump. So the animation has to be subtle (which is good anyways, lets not take animation too far.)

Example Page
DOWNLOAD EXAMPLE FILES + TEMPLATE

Tags: , , , , , , , , ,


« We as web developers need to be creative in our messaging… Adobe Acrobat 9, making web design / development easier? »

Subscribe

About

This is the blog of Ross Johnson, a co-owner of a Michigan web site design company, College Instructor, and Publisher.

Top Posts

Recent Posts

DesignOOGLE, inspiration by keyword Basecamp Advertise here