7

I've been trying to figure out how Google animate their logos since the particle explosion one a while back, and today they have a chemistry set to celebrate the 200th anniversary of Robert Bunsen.

I'm assuming this is HTML5 (I'm using Firefox 4, Chrome and Safari 5), but can anyone confirm if so and whether there are any good tutorials on how to do those types of animations?

Jonta
  • 393
  • 5
  • 25
Osu
  • 1,137
  • 2
  • 18
  • 34

1 Answers1

5

This is partialy HTML5:

  1. they use cross-browser sprite technique - one PNG image with multiple scenes.

They clip area of one scene and display it. To show next scene they just shift clipping area start offset.

Just check with Firebug: image is set as background of div tag with heigth exactly of one scene, then they shift Y-offset and background "moves" - just like film tape :)

Here is snippet (Google (C)), notice -380px and then -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 good DIY example from stack: How to show animated image from PNG image using javascript? [ like gmail ]

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

Community
  • 1
  • 1
gertas
  • 16,869
  • 1
  • 76
  • 58
  • This is from firebug: – Yasser Mar 31 '11 at 06:58
  • 1
    If you delete the canvas element in the page using firebug, you will notice that the only animation that remains is minimal, it just changes the transparency of the background image. – Yasser Mar 31 '11 at 07:00
  • 1
    That's cool, thanks for pointing that out. But how do they get the bunsen flame to rise and fall and bubbles to move fast etc. depending on where your cursor is on the screen - surely that's HTML 5 right? – Osu Mar 31 '11 at 22:24
  • Yasser & Osu, you are right, but anyway you can do any animation crossbrowser using technique I mentioned. HTML5 may be involved together to achieve these interactive elements. – gertas Apr 01 '11 at 11:46