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
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
Perhaps the only .gif file in this doodle
3.Static images
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
can anyone make me a html5 site like this?
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.
I recreated this doodle a few days ago using jquery and spritely. It came out pretty nicely.