May 13, 2014

Tinkering with HTML5

A week ago today, I broke my wrist in a softball game. Long story short, I was playing catcher and fielding a throw from left field, but caught a base-runner instead. Snap! Ouch! The following two days involved hospital visits, x-rays, an anesthesiologist, and an orthopedist with an affinity for f-bombs. On the second day, I thought I'd start collecting visual documentation of this new adventure for me as I've never broken a bone before.

That's me on the left, just beginning to discover how much this sucks. Aside from my inconvenience, in the back of my mind, I'm thinking about HTML5, parallax effect in web design, and a tutorial by Joe Fellows with the Creators Project on how to animate a still image using After Effects. So, while getting a third and fourth x-ray, I started thinking about what I could do with an x-ray image along these lines. Certainly grander than my actual skills, I imagined a landscaping journey of my fractures of the radius and scaphoid bones in my wrist, highlighted with animated tracing of the fractures and descriptive labels. Then, I hopped on a unicorn and flew away on the power of rainbows, making sure to stop at reception for a CD-ROM (!) of the x-ray images. Made with Adobe Photoshop CS6, After Effects CS4, and converted to an HTML5 package with EasyHTML5Video (and hosted on Google Drive), I produced this:

While not exactly a parallax product, it does embrace the concept of animating multiple layers of content. There are lots of free resources and tutorials out there for anyone wanting to learn more about parallax effect. Web Features has a nice little online code generator that could be useful to students learning about how this code works.