And now, the…well, slightly border-radius window!

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.

While it's not earth-shattering, I think it's not too bad for something I knocked together in a couple of hours over the last week. No images, no server round-trips, just one single HTML file that only depends on pulling in jQuery, the Chunk OpenType font file, and any audio/visual resources when called upon.

For my next trick…a Google Maps anti-kettle web app?
blog comments powered by Disqus