How Todays Google Doogle World's Fair Is Implemented?

I wanna know is it using the power of HTML5 and jquery any sample example can i get for this ?

Solution 1:

When examining the code, you will actually see that the doodle consists of multiple images:

• http://www.google.com/logos/2011/worldsfair11-hp-1.gif
• http://www.google.com/logos/2011/worldsfair11-hp-2.gif
• http://www.google.com/logos/2011/worldsfair11-hp-3.gif
• http://www.google.com/logos/2011/worldsfair11-hp-4.gif
• http://www.google.com/logos/2011/worldsfair11-hr.jpg - the actual static Doogle
• http://www.google.com/logos/2011/worldsfair11-hp.png

The beautified JavaScript is here: http://pastebin.com/r8s9H2jA

It seems to use JavaScript to create the loupe and uses a combination of CSS / JavaScript to position the animating elements at the right position.

So in short:

• HTML5: It's JavaScript combined with CSS. This, by itself, is not limited to the HTML5 spec, so no.
• jQuery: no.

Solution 2:

I inspected it and it as simple as a "lens zoom" effect like this : http://www.dailycoding.com/Uploads/2011/03/imageLens/demo.html with a big image and some animated gifs on top of it for the animations :)

Solution 3:

No, it's not using any features new in HTML5 or jQuery as far as I can tell (unless you count the scale transition it's using when showing the loupe thing). I seriously doubt Google would put something as big as jQuery on their front page...

It does the round "image mask" effect by having essentially three copies of the doodle, and building a sort-of rounded rectangle out of them that looks something like this (ASCII art go)

__|¯¯¯¯|__
|        |
|        |
|__    __|
  |____|

This is then overlaid by the loupe image, and its thick border makes it seem like we're seeing a circular part of the doodle image.