Flip Clock-Style jQuery Countdown & Count Up Timer Plugin - flipTimer

Flip Clock-Style jQuery Countdown & Count Up Timer Plugin - flipTimer
File Size: 34.1 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

flipTimer is a jQuery plugin which enables you to count down towards or count up from a certain time like a vintage flip clock, depended on CSS3 animations, transitions, transforms and @keyframes.

See also:

How to use it:

1. Load jQuery library together with flipTimer.css and jquery.flipTimer.js.

<link href="css/flipTimer.css" rel="stylesheet">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/jquery.flipTimer.js"></script>

2. Build the Html structure for the flip clock-style timer.

<div class="flipTimer">
  <div class="days"></div>
  <div class="hours"></div>
  <div class="minutes"></div>
  <div class="seconds"></div>
</div>

3. The sample JavaScript to start a countdown timer on page load.

$(document).ready(function() {
$('.flipTimer').flipTimer({ 

// count up or countdown
direction: 'down', 

// the target date
date: 'January 20, 2015 08:30:30', 

// callback works only with direction = "down"
callback: function() { alert('times up!'); }

});
});

4. All the configurations.

$(document).ready(function() {
$('.flipTimer').flipTimer({ 

// count up or countdown
direction: 'down', 

// the target date
date: 'January 20, 2015 08:30:30', 

// callback works only with direction = "down"
callback: function() { alert('times up!'); }

// custom date
seconds: false,
minutes: false,
hours: false,
days: false,

});
});

Change log:

2015-02-20

  • changed default date to tell todays time

This awesome jQuery plugin is developed by andrewjtait. For more Advanced Usages, please check the demo page or visit the official website.