CSS Sprite that works like a gif?

[painkillerjoy]

Hi all!

I have a question about CSS sprites. Recently I saw a really cool effect that I would like to try out. At first I thought it was a .gif image, but actually it uses the sprite method and automatically switches the value of the background image to work like a gif (I hope this sounds clear enough). I’m not sure if a javascript file was manipulating it.

I was wondering how is it possible to have it automatically switch values? Any hints will be greatly appreciated :)

[Paulie_D]

Can you provide us a link to the effect that you are referring to?

What triggered the change…a hover, a click or something else?

[painkillerjoy]

@Paulie_D:
http://www.kinetic.com.sg/main.html

Some of the images appear to be gifs, but it’s actually the background-position property switching automatically. No clicking or on hover.

@karlpcrowley:
Cool, I’l go check it out. I’m a newbie on this forum, never used jsfiddle.net before

[joshuanhibbert]

That site is doing is using JS, but you can also do it using CSS animations. You just need to wrap your head around steps. Here is an example: http://dabblet.com/gist/1953867

[painkillerjoy]

@joshuanhibbert:

That is amazing, is that CSS3? I learnt something new today, thanks!

[joshuanhibbert]

Yes it is CSS3, pretty cool isn’t it? Check it out on this site: http://impending.com/

[Author]

Posts