»

A TalkTalk Demo

Homesafe demo start screen

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

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!

User gets to choose. Using real radio input tags too!

Pick what to block, then see it visualised with an animation

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

Another real form positioned on the screensgrab

Raphaël animated clock to the time selected by viewer

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.

Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>