A fully featured countdown clock.
FlipClock.js
Installation
FlipClock is designed to be used a UMD or ES6 module that can be required and
imported. NPM is the primary package manager. The CDN exposes FlipClock as a
global variable.
NPM
npm install flipclock --save
CDN
Specific version
https://cdn.jsdelivr.net/npm/flipclock@<?js = pkg.version ?>/dist/flipclock.min.js
Always use latest version
https://cdn.jsdelivr.net/npm/flipclock/dist/flipclock.min.js
Download .ZIP
New in v1.0
FlipClock originally was developed an example library for a computer science class that I taught. I never actually thought people would use it, let alone imagine how people would use it. It's been a long time coming, but FlipClock.js has been rewritten for a modern age with no dependencies.
Rewritten ES6 Syntax
No dependencies, pure vanilla JS
Import with Webpack, Rollup, Browserify with the UMD build
Mobile friendly with responsive CSS
Supports negative values
Supports alpha values
All new CSS themes for different flip effects
All new clock faces
Extensible and customizable
Unit testing with Jest
Basic Usage
import FlipClock from 'flipclock';
const el = document.querySelector('.clock');
const clock = new FlipClock(el, new Date, {
face: 'HourCounter'
});
Collaborators
Special Credit
Big thanks to all the examples on the Internet. But in particular, a huge thanks goes out to Adem Ilter who built this example, which provided the best animation and least amount of code to prove the concept.
License
HomePage
Repository