Google unleashes the power of HTML5 in its new doodle

Published On :

Few days ago we saw Google celebrate the Buckyball Anniversary by adding a Buckyball animation effect instead of the second ‘o’ in ‘Google’. It used to animate when our cursor was hovered over it which gave a rotating & revolving effect.

It was the first time that Google experimented with the power of HTML5. Around three months ago we saw HootSuite5 using HTML5 to its full potential. This Google Doodle is basically an animation effect using the power of HTML5.

Remember, It works in IE8, but has some major alignment errors associated with it. It will work properly in modern browsers like Google Chrome, Safari & Firefox (Firefox 3.5 is not 100% Compatible).

How the HTML5 Doodle looks like (Undisturbed State)


google-html5-doodle-undisturbed-state

When the doodle is disturbed (Animated State)


There are three instances when the Undisturbed state gets converted into Animated state. Yep, that’s where the whole fun is.

#1 Hovering

hovered-state-of-html5-google-doodle

When you hover/take your mouse pointer near this new Google Doodle, then the balls which comprise the doodle start spreading. It seems like it has a repulsion force acting against the cursor.

Try taking your mouse pointer towards a ball which is trying to reform the doodle, it would move away from the cursor area.

#2 Switching Tabs/Windows (Vertical bouncing)

switching-tabs-effect-on-google-doodle

When you’re Google tab is open and you’re navigating to another tag then you won’t notice any animation effect. When you do the exact reverse, i.e. when you come from another tab to the already opened Google tab then you will notice a small Vertical bounce made by the whole doodle.

Similar effect will be seen even when you switch windows after some time. (This is due to the duration of inactivity in the Google page that it displays some animations similar to when switched tabs.)

#3 Zoom-In / Zoom-Out (Horizontal Bouncing)

zoom-in-zoom-out-effect-on-google-doodle

You would probably notice a bigger animation effect as compared to the Switching tabs one, when you Zoom-In/Zoom-Out the Google homepage. Also, you can see that the bounce is horizontal and not vertical.

Out of the three effects; the first one surely stands out as the best.

Note:- This new Doodle works only in USUK & ES

Thanks to Pradeep from HellBoundBloggers who gave this alert!

Which one did you like ? Have you noticed the 4th/5th one too ? Please do share them with us. Would add them to the list.

Share :
Tagged as : 12 Comments
About » Has written 231 Post(s) «

I'm a Web Designer/Developer, SEO'er and a Blogger who gives a few Blogging Tips in the form of posts/tutorials. Follow & Subscribe to my Blog if you feel it's worth it.

HostGator
Loader

12 Comments Comments RSS

  1. #

    Mystery solved. I was wondering what the logo was about. When I couldn’t link it to any special event I assumed it was just for fun. It still is just for fun, but the fun is in showing off the capabilities of HTML5.

    Thanks for shedding light on this!

  2. #

    The article is incorrect – the Google doodle they’re referring to is just plain HTML 3.2. There is absolutely no HTML 5 used at all (no canvas etc) just DIVs and javascript (HTML 3.2).

    • #

      Indeed, you are right. Just after its appearance, a thread in StackOverflow started dissecting it: No HTML5. When I saw it, I also thought HTML5! Wooho! But just for the hype of these days, because the same efect can be done through JS since ages ago.

      In Google they just love having fun!

      Ruben

  3. #

    I haven’t even seen it yet but judging from where you said it’s available I assume that’s why I haven’t seen it yet. I’m Canadian and we seen to get everything last.

    To be honest I’m not even sure if I understand the point of all of this…

  4. #

    This is really great , checked it in afternoon.

  5. #

    I got this info from Mashable and I liked every part of it. Really Awesome.

  6. #

    I got this information via Facebook .. Awesome Doodle :)

  7. #

    too bad the new doodle is not available outside those countries, I hope Google consider on expanding that.

  8. #

    The Goodle Doodle and HTML 5 have no connection whatsoever.

  9. #

    why this doodles are for us and uk only?

  10. #

    Wow..nice observation..Google always comes up with something innovative

Post a Comment

Your email is never published nor shared. Required fields are marked *

Also, use your Real name in the 'Name' field. Comment names with only keywords will be trashed.