⏰ A lightweight and performant flip styled countdown clock.
Version: 0.2.1 [JS: 5.66KB, CSS: 4.47KB]
- 💡 Lightweight - No jQuery! <11KB minified
- ⚡ Performant - Animations powered by CSS transitions
- 📱 Responsive - Works great on screens of all sizes
- 🎨 Themeable - Choose from built-in themes, or add your own
Example live at: https://pbutcher.uk/flipdown/
Remix FlipDown on CodePen: https://codepen.io/PButcher/pen/dzvMzZ
For basic usage, FlipDown takes a unix timestamp (in seconds) as an argument.
new FlipDown(1538137672).start();
Include the CSS and JS in <head>
and include the following line in your HTML.
<div id="flipdown" class="flipdown"></div>
See a full example here.
To use multiple instances of FlipDown on the same page, specify a DOM element ID as the second argument in FlipDown's constructor:
new FlipDown(1538137672, 'signup').start();
new FlipDown(1538137672, 'register').start();
<div id="signup" class="flipdown"></div>
<div id="register" class="flipdown"></div>
FlipDown comes with 2 themes as standard:
- dark [default]
- light
To change the theme, you can supply the theme
property in the opt
object in the constructor with the theme name as a string:
{
theme: 'light'
}
For example, to instantiate FlipDown using the light theme instead:
new FlipDown(1538137672, {
theme: 'light'
}).start();
Custom themes can be added by adding a new stylesheet using the FlipDown theme template.
FlipDown themes must have the class name prefix of: .flipdown__theme-
followed by the name of your theme. For example, the standard theme class names are:
.flipdown__theme-dark
.flipdown__theme-light
You can then load your theme by specifying the theme
property in the opt
object of the constructor (see Themes).
Create a new FlipDown instance.
Type: number
The unix timestamp to count down to (in seconds).
Optional
Type: string (default: flipdown
)
The DOM element ID to attach this FlipDown instance to. Defaults to flipdown
.
Optional
Type: object (default: {}
)
Optionally specify additional configuration settings. Currently supported settings include:
Start the countdown.
Call a function once the countdown has ended.
Type: function
Function to execute once the countdown has ended.
var flipdown = new FlipDown(1538137672)
// Start the countdown
.start()
// Do something when the countdown ends
.ifEnded(() => {
console.log('The countdown has ended!');
});
Thanks to the following people for their suggestions/fixes:
- @chuckbergeron for his help with making FlipDown responsive.
- @vasiliki-b for spotting and fixing the Safari backface-visibility issue.