Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I 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.

https://www.dropbox.com/s/n84yizriltx1rj7/RotatingGears.jpg

How would one go about doing this without Flash?

share|improve this question

closed as off-topic by DA01, Mr E. Upvoter, Yisela Jul 17 '13 at 21:08

  • This question does not appear to be about graphic design within the scope defined in the help center.
If this question can be reworded to fit the rules in the help center, please edit the question.

    
You would need to look into HTML5 canvas and possible libraries such as Rapheal.js. Otherwise, you'd have to create gif image slices and piece things together. –  Scott Jul 17 '13 at 15:25
    
I'd be more concerned with the fact that gears connected in that matter wouldn't physically be able to rotate. –  DA01 Jul 17 '13 at 15:47
3  
This question appears to be off-topic because it is about code implementation rather than graphic design. I'd suggest migrating to StackOverflow –  DA01 Jul 17 '13 at 19:59
    
@Scott Can be done easily with js. No need for canvas which isn't supported by the browsers of many many people. –  Eric Jul 17 '13 at 20:06
    
For clarity, can please post what browsers thing needs to support? –  vector Jul 18 '13 at 13:51

4 Answers 4

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):

rotating svg example

Mousover effects could be added with JavaScript

share|improve this answer
2  
FYI, this is supported in Firefox on Linux, but it will use 100% CPU to run the animation at maximum fps. –  Dan Hulme Jul 17 '13 at 17:49
    
Why not use animated GIFs or image sprites? He can still control the states with Javascript and have much wider browser support. See this question. –  Mr E. Upvoter Jul 17 '13 at 22:19
    
@Dominic you're right, that'd be easier. Just wanted to post this as an option, albeit a lousy one :) –  JohnB Jul 17 '13 at 22:37

Depending on what browsers you need to support, you can get away with css3. Small sample http://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.

share|improve this answer
    
CSS3 animations are only compatible with ie10+, and require the webkit code in safari and chrome. Unless you're developing something strictly to be used on mobile phones or tablets, it's not a good idea to tease yourself with the more advanced CSS3 features. That is, assuming this is a professional project. caniuse.com/css-animation –  Eric Jul 17 '13 at 18:53
    
... did you miss this part of my answer? : 'Depending on what browsers you need to support' –  vector Jul 17 '13 at 20:59
    
Just adding that it's unlikely to be feasible in professional project at this time. It's not a simple case of "this won't work in anything earlier than ie9, oh well", it's more like the page won't work for at least one third of traffic. –  Eric Jul 18 '13 at 13:31

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.

share|improve this answer

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.

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.