Tell me more ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.
up vote 8 down vote favorite
1

If you look at Martha Graham Google Doodle, its an animation.

Its not too long ago that you would not see such an animation on a web page without the use of Flash (or a similar plugin).

I am assuming its something HTML5 related, but I looked at the source and I thought things like this where supposed to use the <canvas> tag. I don't see one, and instead see several <div>s.

So what technique are they using?

Edit

After some more investigation it looks like they are using CSS Sprites in a really advanced way. It seems like it would be very tedious and time consuming to set something like this up manually. Are there any tools for this?

share|improve this question
1  
Highly localised question I think. – ChrisF♦ May 11 '11 at 20:51
2  
@ChrisF, I think he's just looking for information about the technique used should he wish to use it as well. – GrandmasterB May 11 '11 at 21:02
If there's a generalizable question that can be made of this, feel free to ask that. As it is now, and given the answers provided, this is too localized and will likely be meaningless past today. – user8 May 11 '11 at 23:47
1  
not too long ago that you would not see such an animation on a web page without the use of Flash - hmm, I must have just imagined that there existed a thing called '.gif' in the ancient days of the internet, with which such animation was (and still is) possible. – TZHX May 12 '11 at 7:48
1  
@John Isaacks - I completely disagree. Sure, there's a lot of crap animated gifs, but that's down to the creators, not the format. The basic thing Google had could easily have been achieved as such. – TZHX May 12 '11 at 16:02
show 3 more comments

closed as too localized by Mark Trapp May 11 '11 at 23:46

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, see the FAQ.

2 Answers

up vote 10 down vote

If you look at the URLs in the div elements, you'll see some sprites:

enter image description here

share|improve this answer
Yeah, I noticed that too, I updated my question :) – JD Isaacks May 11 '11 at 20:06
up vote 0 down vote

Hmm! Thats - in fact - is a cool idea. Let's positioning a rectangle on a sprite, then use javascripts setInterval() to move the position, to next image in sprite, yy pixels X each zz millisecond.

No tools, just coding (well, there will be pure readable code as a result in the END, if you use tools). And oh, some time consuming hunting for pixels for achieving accuracy. Browser compatibilities with animated gif (uuh) and technique mix up with flash can be avoided..

share|improve this answer

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