animating an image

[magician11]

Hi there,

So I’m building this site. Every page has a heading with a orangy swirly background. My client wants it to literally move and swirl..
One of my client’s other sites.. some developer did that by creating a flash animation.

I’d rather not use flash, and use some css trick or other. I’m wondering about using something like the marquee element to animate it.

any good suggestions?
thanks,
Andrew

[noahgelman]

use a gif

[magician11]

ok.. not too experienced with creating gifs.. what’s the simplest way to generate a gif from that image? I know I’ll need to make multiple copies of the same images slightly shifted..

[Paulie_D]

You don’t need a gif…if you look carefully at the flash in the example page you can see that it’s two images glued together and then scrolled horizontally across the screen.

This should be fairly easy to do with a css animation.

I’ll have a think.

[Paulie_D]

Yep…that’ll work.

Example using webkit: http://tinkerbin.com/Y0klVELy

Of course, you would have to choose a proper image that merges nicely at the repeat stage.

[magician11]

that’s great, thanks!

It didn’t seem to work, until I worked out it only works in Chrome (and Safari?). I found some code to add to make it work in Firefox too. But Internet explorer is a fail?

Here’s where I am up to.

[Paulie_D]

Yes, I only coded the example for webkit…adding Firefox is simple enough, as you have found.

IE is a different issue as animations are not supported (except for perhaps IE10) so the customer would have to be happy with that.

If not, then you’ll have to use javascript to do something.

Glad I could help.

[Author]

Posts