HTML5 + CSS3 Title Sequence for WDS10
18 October 2010
There's nothing that has quite the ability to sharpen one's creative process like a ridiculous deadline. In this case a 72-hour deadline to complete the opening titles for the Web Directions South conference – all the way from creative brainstorming to seeing it on-screen in front of 600 people.
Although I don't encourage you to look at the code, I'm sure some people will. Timeline animation code is never the prettiest (because it has to be so sequential) and three late nights of frantic coding make it doubly so, but here are a few clues that might help you navigate the morass of functions and variables.
- Although HTML5 audio has a timeupdate event that fires regularly to tell you where the audio is up to, it doesn't have great accuracy (it fires about once every 300 milliseconds). So, I had to write my own tick() function which manually checks the audio's currentTime and keeps the animation synchronised with the sound.
- I wrote this specifically for Chrome (lots of -webkit prefixes), as it seemed to have the highest frame rate and smoothest animation. Alarmingly, Safari and Chrome nightlies both exhibited really bad up-scaling and font anti-aliasing when using CSS transforms and Chrome showed some really bad animation artifacts. Hopefully these get fixed before they make it into stable builds.
- Animating the opacity of text can be a little clunky, particularly in the last 10%. For some reason when you animate to 100% opacity the browser does weird (strong) anti-aliasing on the text just as it hits 100%; to avoid this I only animate to 90% opacity.
- It's amazing how effective a 2 pixel high div is at emulating a line (particularly when you rotate it using CSS transforms).
- Magic numbers produce a lot of magic.
For me, the code is kind of redundant – it was just what was necessary to produce what I saw in my head. The great thing about it is that it didn't provide much of a barrier to doing so; there were relatively few spots where I had to compromise my creative vision for what was possible with the tools I had chosen.
Thanks to Maxine and John for providing the giant screen space which inspired this piece, and thanks also for the "sharpened creative process" which helped drive me :P
The music used is Hans Zimmer - Time (We Plants Are Happy Plants Remix)
Follow me on Twitter
To hear smaller but more regular stuff from me, follow @themaninblue.
- Resolution dependent layout update
- footerStickAlt: A more robust method of positioning a footer
- widgEditor: A simple, standards-compliant WYSIWYG HTML editor
- Accessible, stylish form layout