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

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.