FlipDown
Version: 0.2.2 [JS: 5.72KB, CSS: 4.47KB]
Features
-
💡 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
Example live at: https://pbutcher.uk/flipdown/
Remix FlipDown on CodePen: https://codepen.io/PButcher/pen/dzvMzZ
Basic Usage
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.
Multiple Instances
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>Themes
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
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).
API
FlipDown.prototype.constructor(uts, [el], [opts])
Create a new FlipDown instance.
Parameters
uts
Type: number
The unix timestamp to count down to (in seconds).
[el]
Optional
Type: string (default: flipdown)
The DOM element ID to attach this FlipDown instance to. Defaults to flipdown.
[opts]
Optional
Type: object (default: {})
Optionally specify additional configuration settings. Currently supported settings include:
FlipDown.prototype.start()
Start the countdown.
FlipDown.prototype.ifEnded(callback)
Call a function once the countdown has ended.
Parameters
callback
Type: function
Function to execute once the countdown has ended.
Example
var flipdown = new FlipDown(1538137672)
// Start the countdown
.start()
// Do something when the countdown ends
.ifEnded(() => {
console.log('The countdown has ended!');
});Acknowledgements
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.