KevAdamson.com

KevAdamson.com :
Freelance Illustration, Web Design, Graphic Design and Animation




RSS Subscribe to my blogRSS


Animated gif backgrounds n rollovers : Jul 25 2005

Web Design / 8 comments

Rolling, rolling, rolling ...

On this site, and a few others, I have used ‘old school’ animated gifs as backgrounds to some of my title elements and links and that. The animated gif has gained a reputation of being naff coz of all those spinning email icons and banner ads. But, about animated gifs, I say this: "Wha? Animated gifs? They’re alright."

Anyway, does anyone know why they don’t ‘work’ in safari? Is it ‘not correct’ to have background elements as animated gifs? If not, why not? And if yes, who? or / and when? etc.

I’ve also noticed that animated gifs as background images on :hover behaviors don’t work in FireFox (but do in our old friend IE6)?

Hmmm … I shall sit here stroking my chin and looking puzzled until someone gives me answers …

Actually, I’ve just remembered I’ve got a meat pie in the microwave. So I’ll just go consume that little pastry parcel of meaty delight, and then stroke my chin and go ‘hmmm’ a bit …


COMMENTSCOMMENTS

  1. Animated Gifs as Background images ... and as background rollover images seem to work fine in Firefox (Mac/IE), Safari, and IE6. What I’m not sure about is background images that are preloaded but never displayed until rollover… like if you have a static image as a link background or image and then you switch it out for an animated image when the users hovers on the link. If you give me some specific examples, I’ll try and do a little more reasearch.

  2. I like your site design by the way. It feels kinda like an old-school zine ... in a good way.< /p>

  3. @ Jason : Cheers Mate. Still got loads of tweaks and subtleties I want to ‘nail’. As for my kevadamson.co.uk site – well, loads still to do on that.Thanks for the animated .gif info. My ‘news-man’ background doesn’t seem to ‘work’ in Safari (at least in the version I have on my mac – OSX 10.2). Animated gif rollovers seem to work fine on most browsers if they are looping, like your own, but not if you want them to play once on rollover …It’s a puzzlement …

  4. Yes, I’ve had the same problem on the launch of Digitalthread.com version 2 (http://www.digitalthread.com) with my top Homepage links: Safari only plays the first frame of the Rollover Background Animation of the small icons. But, I think there’s relief in sight… I was over at my friends house who has Tiger OSX (10.4.x) and Safari, and to my amazement, the rollovers animated! I don’t know if its a new Tiger affect, or just Safari and Tiger together, but I don’t think it’s a new version of Safari.Hopefull future versions of Safari will fix this with or without Tiger installed.

  5. You've got a beautifully designed site here.

    • Kees
    • Dec 07 2009, 08:58

    This is an old thread ;) but still relevant to me.

    I have an issue where a "loader" .gif is not displayed in Webkit browsers (Chrome and Safari). It is in any other browser I can lay my hands on. It is a background image in an absolute positioned div.

    Please look at this site (the dekbedovertrek webshop "assortiment" filter) http://dekbedovertrekshop.com

    Thanks!

  6. @ Kees : I'm wondering if it could be a position issue. I checked on Safari for Windows and it wasn't displaying.

    Might be worth checking out this test page to see if animated .gifs are working in your version of the Safari browser:

    http://tinyurl.com/yfr8672

  7. Your blog site is wonderful. I enjoyed it. Plus your post is informative and concise. Thanks a lot :) I am a member of http://wegif.com/ and I'm an animator.



SAY STUFFSAY STUFF

Details






Note: This is for commenting on the above article - not for sending me a general enquiry. My enquiry form can be found here.

Submit

The following html can be used: em, strong, a (although "www" or "http" will auto-magically get converted to links)


ILLUSTRATION

WEB DESIGN

GRAPHIC DESIGN

ANIMATION


BLOG : “ TALKING OF DESIGN

FIND AN ARTICLE FIND AN ARTICLE

Keyword Search for an Article:

Article Category List:

Article by Date:


READ AN ARTICLE READ AN ARTICLE

Latest Articles:

140 alternative characters to Lorem Ipsum

05/08/10
Whimsical Twoddle

I recently wrote a post that contained 140 characters of Lorem Ipsum for you to use when adding dummy text for twitter posts...  ( more )