• Home

  • Portfolio

  • Freebies

  • Blog

  • Testimonials

  • Contact

  • More

    Joanna Kurpiewska

    Out of the box e-learning designer

    Engage learners with scratch-off activity to reveal randomly generated badge

    September 29, 2018

    Create your custom post-it note in Power Point

    April 8, 2018

    Choose your own e-learning adventure

    October 21, 2017

    Breaking news screen for e-learning

    July 30, 2017

    A control room with After Effects touch

    April 21, 2017

    Please reload

    Recent posts

    Create your custom post-it note in Power Point

    April 8, 2018

    Interactive timeline for the European Union

    July 29, 2016

    Engage learners with scratch-off activity to reveal randomly generated badge

    September 29, 2018

    1/10
    Please reload

    Featured posts

    Christmas countdown with JavaScript

    August 18, 2015

    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.

    Tags:

    java script

    Christmas

    Please reload

    September 2018 (1)

    April 2018 (1)

    October 2017 (1)

    July 2017 (1)

    April 2017 (1)

    January 2017 (1)

    December 2016 (1)

    November 2016 (1)

    September 2016 (1)

    July 2016 (1)

    June 2016 (1)

    May 2016 (1)

    April 2016 (1)

    March 2016 (1)

    February 2016 (1)

    November 2015 (1)

    October 2015 (2)

    September 2015 (1)

    August 2015 (3)

    July 2015 (5)

    June 2015 (3)

    May 2015 (1)

    April 2015 (2)

    Please reload

    Archive
    RSS Feed
    Share
    • White YouTube Icon

    Stay up to date with blog posts and freebies

    • White Twitter Icon