Homesafe demo start screen
My first placement with Digital Gurus. Thanks guys :-). Pixelgroup needed a JavaScript guy for a week to convert a Flash demo into something that’ll run on an iPad. Sounds like a job for an iframe, jQuery and Raphaël js.
Bit of a zoom animation to set the scene
Flash-like animations
Raphaël is a good choice when you need a bit a flexibility with your animations. It’s backwards compatible to Internet Explorer 7/8 and you can rotate your elements. In this demo all the images are added as pngs to a Raphaël ‘paper’. All text and form elements are positioned over the top.
User gets to choose. Using real radio input tags too!
Pick what to block, then see it visualised with an animation
Audio
The narration was sliced up into downloadable sound bites. When a certain steps were reached in the demo an HTML 5 audio tag is written in adding the assorted sources (mp3 & ogg). I’ve also added a Flash back-up for older browsers.
Another real form positioned on the screensgrab
Raphaël animated clock to the time selected by viewer
TalkTalk do TV, broadband and home phone. You can see a copy of the TalkTalk Homesafe demo here.