Google Doodle always amazes each one of us which their extra ordinary creativeness. Be it the Guitar Le Paul’s birthday or today’s Google doodle on Art Clokey’s birthday. When I opened twitter this morning found that lot many people are discussing about the Google Doodle being made in flash. However, the fact is Google never uses Flash for their Doodles, at least I have not noticed one. What they use is the latest technologies like HTML5, CSS3 to showcase stuff similar to flash. This also proves that the new web technologies, which the world has been talking about is almost near to what one can achieve in Adobe Flash. It’s worth mentioning that you need not install any 3rd party plugin to experience the apps done in HTML5.
In this post I will try to share my understanding on today’s Google Doodle. In short, Google has not used flash to build those effects but instead utilized the CSS sprite hack. Let’s understand how is it done.
Decoding Google Doodle
Have a look at these two images –
1. https://www.google.com/logos/2011/gumby11-initial-sprite.png
2. https://www.google.com/logos/2011/gumby11-gumby.jpg
These two images contain the secret of the animation. Moreover, If you scroll the second image horizontally when opened in browser, you may be able to replicate some of the animation. Some of you might get what exactly is happening here. But for those who are not experienced well with CSS sprite may read on.
So when the Google’s Homepage is rendered in the browser, the Gumby reveal from the green ball and waves at you. This surely looks like an animation to you. But behind the scene, Javascript is changing the position of the background image. Notice the following image (cut from the second image mentioned above) and you will see how it happens.
So to produce the rising affect this doodle utilized the CSS background-position property. It changes the horizontal position of the background image and to us it appears like an animation. Clever no ?
Same applies for the initial sprite the balls moving up & down is produced by the background-position property of the CSS. Only difference is that the animation is produced when you take the mouse cursor over a ball. It does not require any javascript function but instead it uses the pseudo class called :hover .
I hope this explanation of Google Doodle will help you understand the CSS Sprites and how they work. If you are a web developer then you already have some nice ideas sprouting in your brain.
Stay Digified!!
Sachin Khosla
