how todays google doogle World's Fair is implemented?

Question

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

Judging from the other [Google doodle](http://stackoverflow.com/questions/tagged/google-doodle) questions, I don't think this question is too localized. The community has shown a keen interest in the techniques being used by Google and if it *is* localized, it is very much so for the programmer community which resides here. — Aron Rotteveel, May 01 '11 at 11:30
There is a great jQuery plugin for making something like that: http://www.mind-projects.it/projects/jqzoom/ — good_evening, May 01 '11 at 11:16

Aron Rotteveel · Accepted Answer · 2011-05-01T11:25:42.037

3

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

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.

edited May 01 '11 at 11:25

answered May 01 '11 at 11:20

Aron Rotteveel

81,193
17
104
128

and what a beautified javascript that is ! – Vishwanath Dalvi May 01 '11 at 11:21
@Matti read to quick indeed, corrected example! The css classname appeared in the search for `canvas` – Aron Rotteveel May 01 '11 at 11:23

score 2 · Answer 2 · answered May 01 '11 at 11:18

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 :)

answered May 01 '11 at 11:18

dwarfy

3,076
18
22

1

+1 thanks for link look like the same ! – Vishwanath Dalvi May 01 '11 at 11:20

Matti Virkkunen · Answer 3 · 2011-05-01T11:24:34.977

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.

how todays google doogle World's Fair is implemented?

3 Answers3

Linked