There's a new trend in web design which is video background - it surely makes the site more interesting and engaging. And creating video background interaction was the latest e-learning challenge.

As I didn't have any inital idea, I decided to search through resources for royalty free video with an open mind and see what's going to grab my attention.

When I saw this 10 seconds video my only thought was "..how many days are left until Christmas?" and I continued browsing for another videos...but then an idea popped up "heeey, why not to use this Christmas video and mix it with some JavaScript code counting the time down until Christmas?".

So I had the visual background already and the other thing which I thought would add more festive feel was Jingle Bells audio.

Now comes the most important part of the interaction: I needed JavaScript code!

I found this free source with code I wanted to have. Some modifications were essential and I finally had the exact bit counting the days, hours and minutes left until 25th of December.

I had to create a variable in Storyline which pulled the numbers and whole Christmas sentence from JS script to be displayed on the screen. There's also a bit in the code including this variable created in Storyline.

The other text on the screen is the information about some tips how to survive holidays, which is a link to one of my favourite last year's e-learning challenge.

If you'd like to know how to create transparent text, check this link out. It's "awesome tips" bit in my example and I like seeing the video playing underneath.

There are only 3 triggers in Storyline for this project:

1. JavaScript code is executing when the timeline of the screen starts.

2. Timeline is set to 1 minute, so if you keep the project open long enough, it plays from the beginning after 60 seconds and you can see updated time left until Christmas.

3. "Awesome tips" line is a link to Christmas challenge.

This is how much time has left until 25th of December 2015 while I'm writing this post:

(click the image to launch the project)

Check it yourself out and get ready for Christmas.

Edit (07.01.2016): Have updated the project to count down until Christmas 2016.