News

Create a flip-over digital clock effect

Employ the jQuery plugin flipclock.js to create a countdown clock on your home page

7days

INSPIRATION: amphibiox.geox.com

Geox is an Italian shoe and clothing brand that uses technology to improve the performance of its products – and they’re more than capable of expressing their command of technology online.

When the award-winning digital agency Stinkdigital was briefed to promote the Geox Amphibiox, the challenge was to create a memorable campaign that showed how comfortable and dry Amphibiox boots will keep your feet even in heavy rain. The fun bit is how they ensured their tester would experience seven days of non-stop rain! The site also offers plenty of great visuals along the way and makes good use of a flip-over clock to signify time passing.

TECHNIQUE

HTML head

This tutorial is partly based on David Martin’s ‘Create a Countdown & Signup Coming Soon Page’ available at bit.ly/MpVFUC. The effect is achieved using the flipclock.js plug-in with jQuery. The scripts are loaded first, followed by a Google font, and then finally the stylesheets for the clock and for the page itself.

001 <script src="https://ajax.        googleapis.com/ajax/libs/jquery/1.10.2/    jquery.min.js"></script>
002 <script src="js/flipclock.min.    js"></script>
003 <script src="js/scripts.js"></    script>
004 <link href="http://fonts.        googleapis.com/css?family=Montserrat"    rel="stylesheet" type="text/css">005 <link rel="stylesheet" href="css/    style.css">006 <link rel="stylesheet" href="css/    flipclock.css">007



HTML body

The page content sits in a section which itself sits inside a wrapper to facilitate centring the content. All of the HTML required to locate the flipclock on the page is to allocate the class ‘countdownclock’ to a <div>.

001 <section id="wrapper">
002     <section id="countdown">
003         <h1>XX     COMMONWEALTH GAMES</h1>
004     <p>Glasgow 2014<br>23 July – 3    August 2014</p>
005     <div></div>
006  </section>
007 </section>

Stylesheets

There’s nothing much to see in the style.css, especially if you are already happy with creating fullscreen background images and centring content on pages. Flipclock.css has a ton of styles included and makes copious use of pseudo-elements and animation keyframes to achieve the effects. If you’re prepared to do some digging about, you can change every element of the styling. For example, the font family can be changed to a new font-family.

001 .flip-clock-wrapper .flip {
002         font-family: 'Montserrat', sans-    serif;
003         text-transform: uppercase;
004         color: #fff;
005 }

Run the plug-in

Script.js is used for configuring and running the plug-in. Your target date is set on line nine. In our example the digit six represents July (January is zero), and the date is just the date. You can easily double check you’ve set your clock correctly by using the
days.to site. If you want to know how many days it is until 10 December you would just type this address in your browser days.to/until/10-december.

001 var clock;
002 $(document).ready(function() {
003
004     // Grab the current date
005     var currentDate = new Date();
006
007     // Set the target date of your    launch. Here it is the 23 July.
008     var futureDate  = new        Date(currentDate.getFullYear() + 0, 6,    23);

3, 2, 1… Instantiate

Once you have the current date and your target date, the difference is calculated and this is the value that is displayed on screen. It’s divided by 1,000 because the default units are milliseconds. ‘Countdown: true’ sets the clock going down. If you wanted a counter to show how long since an event you set this to false.

001 var diff = futureDate.getTime() /    1000 - currentDate.getTime() / 1000;
002     clock = $('.countdownclock').    FlipClock(diff, {
003 clockFace: 'DailyCounter', 
004 showSeconds: true
005 
×