How does Google animate its logos?

Question

I tried to figure out how Google enlivens its logos from the moment the particles exploded one back, and today they are a chemistry set to celebrate the 200th anniversary of Robert Bunsen.

I assume this is HTML5 (I use Firefox 4, Chrome and Safari 5), but can anyone confirm this and are there any good tutorials on how to make these types of animations?

Answer 1

This is partially HTML5:

• they use the cross-browser sprite method - a single PNG image with multiple scenes.

They crop an area of ​​one scene and display it. To show the next scene, simply shift the offset of the clipping area.

Just check the box with Firebug: the image is set as the background of the div tag with the top of exactly one scene, then they shift the Y-shift, and the background ones “move” - just like a movie tape :)

Here is a snippet (Google (C)), pay attention to -380px, and then to -570px:

<div style="background: url("/logos/2011/bunsen11-hp-sprite.png") no-repeat scroll 0pt -380px transparent; height: 190px; opacity: 0.3; position: absolute; width: 465px; z-index: 20;"></div> <div style="background: url("/logos/2011/bunsen11-hp-sprite.png") no-repeat scroll 0pt -570px transparent; height: 190px; opacity: 0.3; position: absolute; width: 465px; z-index: 20;"></div> 

Here is a good DIY example from stack: How to show animated image from PNG image using javascript? [e.g. gmail]

Update : 2. They also use HTML5 canvas to create part of the animation with interactive effects - for example, bubbles.