Browser Animation - HTML5 and CCS3

HTML5 and CSS3 have been in development for some time, with a lot of things being promised that will move the Internet's core mark-up language into a new era of creativity and functionality.

Finally browsers are starting to support these new technologies, and now developers are starting to explore what they can do.

Instead of boring you with the technology and what it contains, it is better to use show an example and let you consider it for yourselves. Recently at a conference called Web Directions South, a web developer created an opening title sequence for the event. It was a title sequence like many you will have seen, with audio, and visual animation running in a browser. The difference is that this title sequence isn't running from a video rendered in After Effects, it isn't created using Flash, Silverlight or any other similar technology. This instead is created purely in the browser window using nothing but HTML5, CSS3 and Javascript. The code is there for all to see and explore.

The title sequence is based on the recent film Inception and uses audio and ideas from it. Open the following link in the Google Chrome browser, as it was written specifically for that browser as it most closely follows the HTML5 and CSS3 standards at the moment. When it opens in a new pop-up window don't resize it as it was designed to run in 1024x768, and the popup window will be that size.

Let me know what you think of the intro sequence? and the fact is all being generated on the fly by the browser code. Are we finally seeing a return to system level coding (the browser being the system this time)? Title sequences like this becoming the new demo scene productions...

The title sequence: http://www.themaninblue.com/experiment/wds10/ (remember, open it in Chrome as other browsers will crash!)

Also, if you are interested, take a look at the developer Cameron Adam's blog at http://themaninblue.com/writing/perspective/2010/10/18/