Press "Enter" to skip to content

jQuery Retro Flip Clock Countdown Timer Animation

Flip Clock with CSS/Javascript: A lightweight jQuery extension that uses CSS3 transformations to create a beautiful retro-looking Flip Clock that displays the current local time.

flipclock js tutorial, flipclock js documentation, css flip clock animation, flip countdown timer codepen, flipclock js countdown to date, jquery flip countdown, flipclock jquery

How to make use of it:

1. The HTML structure of the flip clock.

<time>
  <div class="clock">
    <div class="dial-container dial-container--hh js-clock" 
         data-cur="9" 
         data-start="0" 
         data-end="12" 
         data-dur="hh">
    </div>
    
    <div class="dial-container dial-container--mm js-clock" 
         data-cur="2" 
         data-start="0" 
         data-end="5" 
         data-dur="mm">
    </div>
    <div class="dial-container dial-container--m js-clock" 
         data-cur="3" 
         data-start="0" 
         data-end="9" 
         data-dur="m">
    </div>
    
    <div class="dial-container dial-container--ss js-clock" 
         data-cur="4" 
         data-start="0" 
         data-end="5" 
         data-dur="ss">
    </div>
    <div class="dial-container dial-container--s js-clock" 
         data-cur="8" 
         data-start="0" 
         data-end="9" 
         data-dur="s">
    </div>
  </div>
</time>

2. Basic CSS/CSS3 Styles.

.transitions-off * {
  -webkit-transition: none !important;
  transition: none !important;
}

time {
  position: absolute;
  top: 150px;
  left: 0;
  right: 0;
  margin: 0;
  display: block;
  text-align: center;
}

.dial-container {
  display: inline-block;
  position: relative;
  text-align: center;
  margin: auto;
  -webkit-perspective: 1000;
  perspective: 1000;
  height: 100px;
  width: 65px;
  cursor: default;
}

.dial-container.dial-container--hh { width: 120px; }

span {
  width: 65px;
  height: 50px;
}

.dial {
  top: 0;
  height: 25px;
  /* overflow: hidden */
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: absolute;
  z-index: 3;
  -webkit-transform-origin: 50px 50px;
  -ms-transform-origin: 50px 50px;
  transform-origin: 50px 50px;
}

span {
  display: block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  overflow: hidden;
  background: #462c2e;
  color: #fff;
  text-align: center;
  line-height: 100px;
  font-size: 80px;
  font-weight: bold;
  border-radius: 10px 10px 0 0;
}

.dial-container--ss span,
.dial-container--mm span {
  text-align: right;
  padding-right: 2px;
  border-radius: 10px 0 0 0;
}

.dial-container--hh span {
  text-align: center;
  min-width: 120px;
}

.dial-container--s span,
.dial-container--m span {
  text-align: left;
  padding-left: 2px;
  border-radius: 0 10px 0 0;
}

span:first-child {
  z-index: 2;
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  background-color: #3c2527;
  color: #ccc;
}

span:first-child:after {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(0,0,0,0.2);
  content: ' ';
  position: absolute;
  bottom: 0;
  left: 0;
}

span:last-child {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  border-radius: 0 0 10px 10px;
  line-height: 0;
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

.dial-container--ss span:last-child,
.dial-container--mm span:last-child { border-radius: 0 0 0 10px; }

.dial-container--s span:last-child,
.dial-container--m span:last-child { border-radius: 0 0 10px 0; }

.dial--static,
.dial--next {
  -webkit-transform: rotateX(0deg) !important;
  transform: rotateX(0deg) !important;
}

.dial--flipped {
  z-index: 2;
  -webkit-transform: rotateX(180deg) !important;
  transform: rotateX(180deg) !important;
}

.dial--next { z-index: 2; }

.dial--later { z-index: 1; }

3. Include the latest version of the jQuery library at the end of the document.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> 

4. The core of JavaScript to enable the clock.

(function() {
  var appendEls, attachEvents, enableTransitions, nthDigit, reset, setAttributes, setClasses, startClock, tick;

  nthDigit = function(int, nth) {
    return parseInt(int.toString().substr(nth, 1));
  };

  setAttributes = function() {
    var hours, minutes, seconds, timeNow;
    timeNow = new Date();
    hours = timeNow.getHours();
    if (hours > 12) {
      hours -= 12;
    }
    $('.js-clock[data-dur="hh"]').attr('data-cur', hours + 1);
    minutes = timeNow.getMinutes();
    if (minutes < 10) {
      $('.js-clock[data-dur="mm"]').attr('data-cur', 1);
      $('.js-clock[data-dur="m"]').attr('data-cur', minutes + 1);
    } else {
      $('.js-clock[data-dur="mm"]').attr('data-cur', nthDigit(minutes, 0) + 1);
      $('.js-clock[data-dur="m"]').attr('data-cur', nthDigit(minutes, 1) + 1);
    }
    seconds = timeNow.getSeconds();
    minutes = timeNow.getMinutes();
    if (seconds < 10) {
      $('.js-clock[data-dur="ss"]').attr('data-cur', 1.);
      return $('.js-clock[data-dur="s"]').attr('data-cur', seconds + 1);
    } else {
      $('.js-clock[data-dur="ss"]').attr('data-cur', nthDigit(seconds, 0) + 1);
      return $('.js-clock[data-dur="s"]').attr('data-cur', nthDigit(seconds, 1) + 1);
    }
  };

  tick = function($el) {
    var $active;
    $active = $el.find('.dial--active');
    $active.removeClass('dial--active');
    $active.addClass('dial--flipped');
    $active.next().removeClass('dial--next').addClass('dial--active');
    $active.next().next().addClass('dial--next').removeClass('dial--later');
    if ($active.next().hasClass('dial--last')) {
      return setTimeout((function() {
        return reset($el);
      }), 300, $el);
    }
  };

  enableTransitions = function($el) {
    return $el.removeClass('transitions-off');
  };

  reset = function($el) {
    $el.addClass('transitions-off');
    $el.children().removeClass('dial--flipped');
    $el.children().removeClass('dial--active');
    $el.children().removeClass('dial--next');
    $el.children().first().addClass('dial--active');
    $el.children(':nth-child(2)').addClass('dial--next');
    $el.children(':nth-child(n+3)').addClass('dial--later');
    setTimeout((function() {
      return enableTransitions($el);
    }), 300, $el);
    tick($el);
    if ($el.attr('data-dur') === 's') {
      $(document).trigger('10s');
    }
    if ($el.attr('data-dur') === 'ss') {
      $(document).trigger('60s');
    }
    if ($el.attr('data-dur') === 'm') {
      $(document).trigger('10m');
    }
    if ($el.attr('data-dur') === 'mm') {
      return $(document).trigger('60m');
    }
  };

  setClasses = function($el) {
    var curIndex;
    curIndex = parseInt($el.attr('data-cur'));
    $el.children(':nth-child(' + curIndex + ')').addClass('dial--active');
    $el.children(':nth-child(' + (curIndex + 1) + ')').addClass('dial--next');
    $el.children(':lt(' + curIndex + ')').addClass('dial--flipped');
    $el.children(':gt(' + curIndex + ')').addClass('dial--later');
    return tick($el);
  };

  startClock = function() {
    return setInterval(function() {
      return tick($('.js-clock[data-dur="s"]'));
    }, 1000);
  };

  appendEls = function() {
    return $('.js-clock').each(function() {
      var $el, end, k, l, start;
      $el = $(this);
      start = parseInt($(this).attr('data-start'));
      end = parseInt($(this).attr('data-end'));
      k = start;
      while (k <= end) {
        if ((k + 1) > end) {
          l = 0;
        } else {
          l = k + 1;
        }
        $el.append('<div class="dial"><span>' + k + '</span><span>' + l + '</span>');
        k++;
      }
      $el.prepend('<div class="dial"><span>0</span><span>0</span></div>');
      $el.append('<div class="dial dial--last"><span>0</span><span>0</span></div>');
      return setClasses($el);
    });
  };

  attachEvents = function() {
    $('.js-clock').on('click', function(e) {
      var $active, $el;
      e.preventDefault();
      $el = $(this);

      $active = $el.find('.dial--active');
      return tick($el);
    });
    $(document).on('10s', function() {
      return tick($('.js-clock[data-dur="ss"]'));
    });
    $(document).on('60s', function() {
      return tick($('.js-clock[data-dur="m"]'));
    });
    return $(document).on('10m', function() {
      tick($('.js-clock[data-dur="mm"]'));
      $(document).on('60m', function() {});
      return tick($('.js-clock[data-dur="hh"]'));
    });
  };

  $(document).ready(function() {
    setAttributes();
    appendEls();
    attachEvents();
    return startClock();
  });

}).call(this);

creating a retro flip clock with jquery, flip clock with css javascript Plugin/Codepen


See Demo And Download

Official Website(paulnoble): Click Here

This superior jQuery/javascript plugin is developed by paulnoble. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.