how todays google doogle World's Fair is implemented? [closed]

问题

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.

Closed 8 years ago.

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

回答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.

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

回答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.

来源：https://stackoverflow.com/questions/5848007/how-todays-google-doogle-worlds-fair-is-implemented