: How can I create interactive animations without Flash? I have a client inquiring about the following image having the gears rotate constantly, and also have mouse over interaction shown by the

@Cofer715

Regarding your other question with the jfiddle example, try adding:


onmouseover="this.style.opacity=1.0;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.2;this.filters.alpha.opacity=20"


to the div tag.

If that raphael library is not available, you can still use this method with e.g. an animated gif:

Place the gif on the page and then overlay divs with a large corner radius to create circular semi-opaque regions arranged on top of the gif, and then the popup text as a separate hidden div element, perhaps with negative absolute coordinates. When you mouseover a particular div, you reduce the opacity and then reposition the proper text box and set the text div visibility to 'visible'.

While it may simplify things if the gif is a single item, it is probably more conservative for bandwidth to place each gear individually. In this case, you place each gif in a div and adjust opacity with hover.

Note also that for a single gear in isolation, you do not need to animate a full 360% rotation: for clockwise rotation, you only need to animate such that the tooth to the left of the one at 12 o'clock gets to the 12 o'clock position.

Personally, I like the feel of the animated-on-the-fly client-side one, but watch out for browser support problems and especially CPU processing time. This is the main navigation or at least the landing age, so test it on an older computer.

Vote Up Vote Down

@Eichhorn212

Sounds like something you could do between several images, gifs for any of the rotating gears, and css. As in not css3 animations, but older code which works across browsers.

The easiest way is with javascript or jquery, but you'd need to understand javascript for that.

Vote Up Vote Down

@Ravi4787994

I believe that could all be done with SVG SMIL animation. The immediate drawback to this is that it is not currently supported by any versions of Internet Explorer, so it's a rather impractical solution.[1]

Here's a basic example of a rotating SVG image (borrowed from Wikipedia):



Mousover effects could be added with JavaScript

Vote Up Vote Down

@Fox8063795

Depending on what browsers you need to support, you can get away with css3. Small sample jsfiddle.net/4Vz63/1/ I just googled 'css3 continuous rotation'. Perhaps you can use 2 different animated gifs for each gear and use them for backgrounds of small divs? This way you can control the moseover and mouseout event (use lighter for one darker for the other). You may have to use js to control the rest of the elements - lines and text elements.

Vote Up Vote Down