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?
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.
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:
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.
This is very creative, honestly I didnt think it would have been programmed like that.
Great Share, I was not knowing the thing like that.
Nice Programmed, i am also a developer.