Google first world’s fair magnifying glass doodle-how did they do ?

By

May 1, 2011HTML52 Comments

This is another illustration of how google created the html5 doodles.Last time we reviewed google’s earth day doodle.

Google’s doodle for 160th anniversary of first world fair is a new variety of html5 doodle or we can say this is another idea from google telling programmers what they can do with html5?

google doodle for first world fair

google doodle for first world's fair

See also: how Google create earth day doodle


This one was conceptualized like magnifying glass/loupe to see through the expo.lets see how google created this doodle.

The Idea!

There are two images/canvases in this doodle one was the normal sized doodle and other one was magnified version of the same doodle.

See High resolution image

This magnified image is the background of the doodle when hovered through the lens.To say it simple the larger image was filtered out except the small circle.When you move your mouse through the magnifying glass the background image gets visible.In this way it was made to look like the magnifying effect.

Images

Four gif images that used in the background image for animation.

The Magnifying glass/loupe effect:

google doodle lens

google doodle for first world fair-lens

The below image clearly explains how the magnifying effect is created.As you can see the hovering causes the outer region to load the background image.Place the lens image over this background to form three layers.

google first world's fair doodle

See more Html5 tutorials.

Related posts:

2 Responses to “Google first world’s fair magnifying glass doodle-how did they do ?”
  1. bthegeek

    This is very creative, honestly I didnt think it would have been programmed like that.

  2. Harsh Bhatt

    Great Share, I was not knowing the thing like that.
    Nice Programmed, i am also a developer.

Leave a Reply