Retro Flipping Countdown Timer - jQuery Flip-Clock
File Size: | 7.66 KB |
---|---|
Views Total: | 9937 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.