How google creates interactive doodles

By

April 23, 2011HTML53 Comments

Google doodle are more frequent this year when compared to previous years.Google celebrates every occasion with a new doodle which nowadays become more interactive rather than static images used before,now the interactive doodles are created using html5 and css3 technique.

See also : How google created magnifying effect in First world’s fair html5 doodle

Google doodle for earthday 2011 was as usual interactive and I analyse how google guys have done it and here is a simple explanation on how it was done.

The whole doodle is a mixup of images which are made to move with the help of JavaScript hover event.When you hover the mouse over the doodle each animal in the image will move they made these animal movement with a series of continuous images.

1.Background Image

google doodle on earthday 2011

google doodle on earthday 2011

as you can see several images are tied to one single images which form css sprites which help in reducing the page load time by reducing the image requests.

2.The moving image

google doodle
Perhaps the only .gif file in this doodle

3.Static images

google doodle on earthday 2011
see high res image

These images are loaded dynamically through the JavaScript function.

see high res image

see high res image

4.Code

The entire logo is sliced into different regions having separate hover events

see this video to understand how the css technique was used to make the interactive doodle.

5.Final image

how google creates html5 doodles

Related posts:

3 Responses to “How google creates interactive doodles”
  1. MICHAEL

    can anyone make me a html5 site like this?

  2. Techie Zone

    That’s a pretty nice explanation. Even though writing the code for this thing is not so difficult, creating the image and arranging them to have the effect surely is hell of a task.

  3. matt

    I recreated this doodle a few days ago using jquery and spritely. It came out pretty nicely.

Leave a Reply