Retro Flipping Countdown Timer - jQuery Flip-Clock

Just another jQuery based flip clock style countdown timer that displays the remaining time (in seconds, minutes, hours, days) with a retro flip animation based on CSS3.

How to use it:

1. Load the stylesheet flip-clock.css in the head, and the JavaScript flip-clock.js after loading the latest jQuery library.

<link rel="stylesheet" href="/path/to/css/flip-clock.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/flip-clock.js"></script>

2. Insert seconds, minutes, hours, and days into the flip countdown clock as follows.

<ul class="flip-clock-container flip-example">
  <li class="flip-item-seconds">23</li>
  <li class="flip-item-minutes">38</li>
  <li class="flip-item-hours">23</li>
  <li class="flip-item-days">01</li>
</ul>

3. Available event handlers to process actions depending on the countdown status.

$('.flip-demo').on('done', function() {
  console.log('doooooonnnnnee!');
});

$('.flip-demo').on('beforeFlipping', function(e, data) {
  console.log('beforeFlipping:', data);
});

$('.flip-demo').on('afterFlipping', function(e, data) {
  console.log('afterFlipping:', data);
});

---

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