How The Martha Graham Google Logo is Animated (Short Explanation)

Google’s logo was so cool today, I had to write something. Here’s a short explanation of how they did it:

First, start with an sprite image that contains every frame of the animation. Next, have in mind to create a whole lota <div>s, styled like so…

<div id="hplogo0" style="left: 307px; top: 48px; width: 88px; height: 89px; background: url(logos/2011/graham11-hp-sprite.png) no-repeat scroll 0px 0px transparent;"></div>

<div id="hplogo1" style="left: 307px; top: 48px; width: 89px; height: 89px; background: url(logos/2011/graham11-hp-sprite.png) no-repeat scroll -88px 0px transparent;"></div>

<div id="hplogo2" style="left: 307px; top: 48px; width: 91px; height: 89px; background: url(logos/2011/graham11-hp-sprite.png) no-repeat scroll -177px 0px transparent;"></div>

//...and so on, and so on

Firebug is a web develper's best friend

The best way to see how these <divs> will tie together is to use a tool like Firebug or the Webkit Inspector to inspect the Google logo after the animation is complete. Since the logo will only be for a single day, I’ve included a screen capture.

Read more: AcumenBrands

Posted via email from Jasper-net