Advent Calendar Christmas 2018 Acknowledgements

This year we thought we would treat our visitors to some digital chocolate to enjoy in the build up to Christmas. Follow the link to view our advent calendar, with new gift boxes to open everyday before the 25th.

What We Did to Customise the Advent

It was no mean feat trying to unpick a complex Javascript based animation driven web project, but that is what we had to do in order to work with the advent and put our own spin on it.

First stop was a skin for the web page itself. We added a logo and social media icons (essential for any site), then went about filling the background with some seasonal cheer by importing a background image changer and finding appropriate Xmas pictures. We were pleasantly surprised to find a snow effect ready to go inside the advent code made by Codrops. After activating this we added another layer of snow effect on top to really make it Christmasy.

Initially the advent was programmed using Javascript and displayed inside an HTML page, we changed this up and decided to use PHP for the page and import the gift boxes from another PHP file, disabling the gift when it was before the date for it to be opened.

We added a calendar strip to the bottom of the advent to track the day of the week and indicate what days have passed, using Javascript to detect the current day and add CSS classes to the appropriate day sections.

Adding Fun

Our infamous leader could not be left off this project so we made him the guardian of the advent gifts. Inspired by the Jurassic Park magic word clip with Dennis Nedry “Ah Ah Ah”, when a gift box is clicked on and not due to be opened he pops up with a discerning waggle of his arm telling the user how naughty they are.

How We Found the Content

One of the most difficult tasks was deciding what digital chocolate to offer visitors to the advent. We included a smattering of Christmas themed videos and some links to our site we wanted to share. There were heated discussions about inclusions, some too rude to mention, but hopefully there is something for everyone, whichever days they come to open their gifts.

It’s for Charity

We decided to make a competition to feature on the advent calendar. The first 5 winners of the competition will have £50 donated to charity. The visitors are tasked with “finding Santa” on our main website and are directed to do so in 2 of the gift boxes in the advent. They must email us using our contact form and say where they found him to win.

The Charity of choice for this year will be Crisis (https://www.crisis.org.uk/), all donations will be made after 25th December.

A Big Thank You

We must thank Codrops (http://www.codrops.com) for their initial work on developing the gift boxes and animation you see in the advent calendar.

Also a big shout out to MIT for the open source license (http://www.opensource.org/licenses/mit-license.php), and further appreciation to Quirkscode for mouse position detection (From http://www.quirksmode.org/js/events_properties.html#position), Stack Overflow for their continuing support of the coding community – specifically in mobile detection code in the advent (http://stackoverflow.com/a/11381730/989439), and Noel Delgado (https://codepen.io/noeldelgado/pen/pGwFx?editors=0110) for direction detection.


Can we help you offer more to your clients?
Speak to our team to find out how our services can compliment your creative work

Get in touch