updated: June 17th, 2008 / Ross Johnson / 23 Comments

Using CSS and GIF’s to animate a menu

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:

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

23 thoughts Using CSS and GIF’s to animate a menu

  1. This is awesome! I’ve been playing with div’s having background images in flash to kind of create this same affect, but it seems you can do it with gifs. Nice work!

    -Gautch

  2. That is very cool. I’ll have to start into how I can use that method on my sites.

  3. Pingback: Diseñar un menú con movimiento con CSS y un GIF animado » Cosas sencillas

  4. Thanks Jarrod and Guatch, I think there are tons of possibilities for the technique. I am really curious to see what others come up with in terms of using it. Keep me posted of any site you end up using it on! =)

    ross
  5. Pingback: For the love of gifs. » Blog Archive » AjaxLine Talkin Gifs

  6. Pingback: Weblimite | Recursos por un tubo » Blog Archive » Menú animado usando CSS y imagenes GIF

  7. Pingback: 20 soluciones a problemas comunes de CSS, 60 ridiculously useful tools for your blog or website, SenCSS CSS Framework, 25 Websites With Beautiful Background, Web Design Resource for Free Patterns, Backgrounds and Textures, jQuery For Absolute Beginners, U

  8. Pingback: Fatih Hayrioğlu'nun not defteri » 19 Haziran 2008 web’den seçeme haberler » Vista, Aero, düğmelerine, düğme, oluşturmak, Bağlantı, yazarları, için, Firefox, WordPress

  9. Really nice, tank you very much!

    antosole
  10. Excellent idea! I’ve now got a few concepts for using animated gifs floating around in my head.

    Just subscribed to your RSS feed.

  11. Thanks Joshua, I am excited to see what ideas people can pull out of this. I haven’t totally figured out all the situations where you can really enhance the interactivity of a site but I am brainstorming some ideas.

    Keep me updated on what you have done, I would like to do a post that showcases some great uses of this technique in the future.

    ross
  12. Pingback: gifs

  13. Pingback: Great Resources Elsewhere: June 09 to June 16 - CSSnewbie

  14. Pingback: website design techniques

  15. Pingback: css ve gif in animasyon menü için kullanımı — World car insure

  16. Pingback: 0 n 8 = ? » Blog Archive » css ve gif in animasyon menü için kullanımı

  17. It’s strange that this technique is not often used or discussed because it’s one of the cooler things you can do with simple rollovers (as long as it’s done in good taste!).

  18. Yeah I am pretty surprised as well Andy. It was one of those ideas where I thought of it, and then figured SOMEONE has to have done it before… only I couldn’t find it anywhere. Hopefully we will see it used more often from here on out.

  19. Pingback: flash tutorial frames

  20. Pingback: background loops

  21. Pingback: Using CSS and GIF’s to animate a menu

  22. Pingback: リンクをデザインするCSSいろいろ - DesignWalker

  23. Thanks- I really appreciate your time in whipping this up for the rest of us. It helped out a lot

    GS

Comments are closed.