Classic Flip Clock Style Countdown & Counter Library – flip.js

Category: Date & Time , Javascript , Recommended | March 12, 2020
Author: pqina
Views Total: 2,903 views
Official Page: Go to website
Last Update: March 12, 2020
License: MIT

Preview:

Classic Flip Clock Style Countdown & Counter Library – flip.js

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:

Flip.js Counter

Counter

Flip.js Stopwatch

Stopwatch

Flip.js Billboard

Billboard

You Might Be Interested In:


Leave a Reply