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

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

See also:

• jQuery Retro Flip Clock & Countdown Timer Plugin - FlipClock
• Vintage Flip Clock Style Countdown & Timer Plugin For jQuery - flipcountdown
• Cool Mechanical Scoreboard Style Countdown Plugin For jQuery - Countdown

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,

});
});

Changelog:

2019-11-07

• Make the digit sets more flexible and generic

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.