Web Design Question

Any of you savvy web design peeps...

Have a client inquiring about the following image having the gears rotate constantly, and also have mouse over interaction shown by the one gear and text being darker.


How would one go about doing this without flash?

Watch this
Abstract Matter

CSS animations, look it up buddy Although if the bottom gear is supposed to rotate around its Y axis i'm not sure

hellofromthemoon profile pic Alumni

If you want a realllly low-tech method, you could manually make a gif of the rotation and put it in as an image in html. And then use area maps to handle the mouse over effect for each separate gear.

Resistance profile pic Alumni

Yeah I just spent an hour getting it to work with CSS, only the animation stuff in CSS isn't compatible with firefox, so the stuff just sits there and doesn't spin.


Shouldn't be too hard if you do it in HTML5 using Canvas. Dive into it, it will be worth it also in the long run.


Or you tell your client, that this will be horribly distracting considering the usability of this site. Constantly spinning gears will drive every user mad. Spinning a gear when the mouse is over it to indicate position would maybe be better.

Abstract Matter

^ I think that's exactly what he's trying to do mate


Oh, i understood that he wants to have

the gears rotate constantly

,like all the time, and just being darker when the mouse is over them. and that is just not a good thing to do...

Resistance profile pic Alumni

Thanks for all the help and input!

My role is primarily graphic design, marketing, networking, and sales. So development and coding isn't really my skill set nor in my job description. I was just seeing if I could figure it out.

My boss just contracted this out to a guy who threw it together in flash fairly quickly.

No account?
Join Us