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
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.