2010-12-01
I have now left work, and whilst I'll be spending quite a bit of December in the kitchen, I've put up a year round-up in the form of an Advent Calendar on the site. It's nothing fancy, but it's a fun play-around with some of the features available in HTML5:
- <video> tags for clips (though only in MPEG-4, so they're not visible in Firefox).
- The CSS3 @font-face property allows me to render text using a font that you most likely don't have on your system. For the window numbers, I used Meredith Mandel's Chunk (Five) font. Yes, not Helvetica for once!
- Using <canvas> to make a snowflake particle system as a background. I had a particle system in mind from the beginning, but I spent last week messing around with a set of CSS3 parallax scrolling backgrounds. It looked great on Safari/Chrome, but just didn't work on Firefox, and the Mobile Safari version was awfully slow. So, I went back to <canvas>. In the meantime, through Hacker News I discovered a fun snowglobe that used a few javascript tricks that hadn't occurred to me before, so the resulting code is heavily indebted to WeBreakStuff.
- The windows use a CSS3 transition animation to flip to white (while the text goes to 'not-quite-Cadbury-purple'). CSS3 rotations are used on the pop-up elements. Because I can.
- If you come back on another day, the doors you have already opened will open - the page uses HTML5 localStorage to keep track of where you've been.
- And a heaping slab of jQuery to make everything work.