Author: | pqina |
---|---|
Views Total: | 20,408 views |
Official Page: | Go to website |
Last Update: | March 12, 2020 |
License: | MIT |
Preview:

Description:
flip.js is an open-source, fully customizable, pretty nice, classic flip clock style countdown & counter component in vanilla JavaScript and CSS.
Ideal for stopwatch, clock, visitor counter, event countdown, billboard & airport-style text flip animation and much more.
Features:
- 24 different easing modes.
- 34 transform functions to build complex counters easily.
- Configurable flip animation.
- Multiple languages.
- Fully responsive and mobile-friendly.
- Auto syncs the client and server time.
- Quickly implements it in your project with the 12 presets.
Basic usage:
1. Download the package and load the following JavaScript and CSS files into your HTML page.
<link rel="stylesheet" href="flip/flip.min.css" /> <script src="flip/flip.min.js"></script>
2. Create a basic counter.
<div class="tick" data-value="1234" data-did-init="setupFlip"> <div data-repeat="true"> <span data-view="flip"></span> </div> </div>
function setupFlip(tick) { Tick.helper.interval(function() { tick.value++; }, 1000); }
3. Create a basic countdown.
<div class="tick" data-did-init="handleTickInit"> <div data-repeat="true" data-layout="horizontal center fit" data-transform="preset(d, h, m, s) -> delay"> <div class="tick-group"> <div data-key="value" data-repeat="true" data-transform="pad(00) -> split -> delay"> <span data-view="flip"></span> </div> <span data-key="label" data-view="text" class="tick-label"></span> </div> </div> </div>
function handleTickInit(tick) { var nextYear = (new Date()).getFullYear() + 1; Tick.count.down(nextYear + '-01-01').onupdate = function(value) { tick.value = value; }; }
4. Create a normal flip clock.
<div class="tick" data-did-init="handleTickInit"> <div data-layout="horizontal fit"> <span data-key="hours" data-transform="pad(00)" data-view="flip"></span> <span data-view="text" data-key="sep" class="tick-text-inline"></span> <span data-key="minutes" data-transform="pad(00)" data-view="flip"></span> <span data-view="text" data-key="sep" class="tick-text-inline"></span> <span data-key="seconds" data-transform="pad(00)" data-view="flip"></span> </div> </div>
function handleTickInit(tick) { Tick.helper.interval(function(){ var d = Tick.helper.date(); tick.value = { sep: '.', hours: d.getHours(), minutes: d.getMinutes(), seconds: d.getSeconds() }; }); }
5. Create a stopwatch.
<div class="tick" data-value="0" data-did-init="handleTickInit"> <div data-layout="horizontal fit" data-value-mapping="indexes"> <span class="tick-group"> <span data-view="flip"></span> <span class="tick-text-inline">m</span> </span> <span class="tick-group"> <span data-repeat="true" data-transform="pad(00) -> split"> <span data-view="flip"></span> </span> <span class="tick-text-inline">s</span> </span> <span class="tick-group"> <span data-repeat="true" data-transform="pad(000) -> substring(0,2) -> split"> <span data-view="text" class="tick-text-inline"></span> </span> <span class="tick-text-inline">ms</span> </span> </div> </div>
<div class="tick-controls"> <button type="button" data-action="start">start</button> <button type="button" data-action="stop" style="display:none;">stop</button> <button type="button" data-action="reset">reset</button> </div>
function handleTickInit(tick) { // start a timer that is updated each 16 milliseconds var timer = Tick.helper.interval(function(passed) { // calculate duration in minutes, seconds and milliseconds tick.value = Tick.helper.duration(passed, ['m', 's', 'ms']); }, 16, { autostart:false } ); // create the controls and listen to user interaction with the controls var buttonStart = document.querySelector('[data-action=start]'); var buttonStop = document.querySelector('[data-action=stop]'); var buttonReset = document.querySelector('[data-action=reset]'); buttonStart.addEventListener('click', function() { timer.start(); // show stop button buttonStop.style.display = ''; // hide start button buttonStart.style.display = 'none'; }); buttonStop.addEventListener('click', function() { timer.pause(); // hide stop button buttonStop.style.display = 'none'; // show start button buttonStart.style.display = ''; }); buttonReset.addEventListener('click', function() { timer.reset(); // show stop button buttonStop.style.display = ''; // hide start button buttonStart.style.display = 'none'; }) }
6. Create a billboard-style text flip animation.
<div class="tick" data-did-init="handleTickInit"> <div data-repeat="true" data-layout="horizontal fit" data-transform="upper -> split -> delay(random, 100, 150)"> <span data-view="flip" data-transform="ascii -> arrive -> round -> char(a-zA-Z)" class="tick-char"></span> </div> </div>
function handleTickInit(tick) { // words to show on billboard var rotation = [ 'Tick ', 'Counter', 'Is ', 'Flippin', 'Awesome' ]; // current rotation index (we start at the first word) var index = 0; // each 3 seconds we'll update the billboard Tick.helper.interval(function(){ // get the word at the current index tick.value = rotation[index]; // when we reach the end we start over at zero index = index < rotation.length - 1 ? index + 1 : 0; }, 3000); }
7. Visit the Tick Documentation for full API.
More previews:

Counter

Stopwatch

Billboard