Talk to us today 0845 86 22 122

Blog.

31st March 2011 |  Written by Dave Ashworth

Google’s Bunsen Burner Tribute Done By HTML5

As well as inspiring childhood memories of laying destruction on the contents of your pencil case in science class, the Google logo to celebrate Robert Bunsen’s 200th birthday yet again demonstrates the power and capability of HTML5.

Gone are the days of using Flash to link animation to user intereaction as shown by the video below.  On initial inspection it just appears to be an animated gif, but in a similar way to the recent Jules Verne logo the image reacts to mouse movement.

By moving the cursor up and down the flame grows and shrinks, which in turn speeds up the bubbles.  Moving left and right changes the colour of the flame and having studied this for a few moments, that is all it seems to do:

The code itself utilises HTML5 and in particular the canvas tag and sprite animation. The javascript code then interacts with the canvas using drawing functions which react to the mouse movement, which in turn produces dynamically generated animations.

And not a SWF file in sight.

Long may this continue.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>