Countdown jquery plugin effects

Question

I implemented the jQuery.Countdown plugin on a page, I would like to give a pagination effect when the numbers change. Same as the one on plugin home page

Does anyone have any idea how to do ?

Answer 1

Practically everything was taken from the page, I just translated...

To magic is done in function $(window).on('load', function() {

$(window).on('load', function() {
  var labels = ['weeks', 'days', 'hours', 'minutes', 'seconds'],
    nextYear = (new Date().getFullYear() + 1) + '/01/01',
    template = _.template($('#main-example-template').html()),
    currDate = '00:00:00:00:00',
    nextDate = '00:00:00:00:00',
    parser = /([0-9]{2})/gi,
    $example = $('#main-example');

  function strfobj(str) {
    var parsed = str.match(parser),
      obj = {};
    labels.forEach(function(label, i) {
      obj[label] = parsed[i]
    });
    return obj;
  }

  function diff(obj1, obj2) {
    var diff = [];
    labels.forEach(function(key) {
      if (obj1[key] !== obj2[key]) {
        diff.push(key);
      }
    });
    return diff;
  }
  var initData = strfobj(currDate);
  labels.forEach(function(label, i) {
    $example.append(template({
      curr: initData[label],
      next: initData[label],
      label: label
    }));
  });
  $example.countdown(nextYear, function(event) {
    var newDate = event.strftime('%w:%d:%H:%M:%S'),
      data;
    if (newDate !== nextDate) {
      currDate = nextDate;
      nextDate = newDate;
      data = {
        'curr': strfobj(currDate),
        'next': strfobj(nextDate)
      };
      diff(data.curr, data.next).forEach(function(label) {
        var selector = '.%s'.replace(/%s/, label),
          $node = $example.find(selector);
        $node.removeClass('flip');
        $node.find('.curr').text(data.curr[label]);
        $node.find('.next').text(data.next[label]);
        _.delay(function($node) {
          $node.addClass('flip');
        }, 50, $node);
      });
    }
  });
});

<link rel="stylesheet" href="http://hilios.github.io/jQuery.countdown/css/main.css">
<script src="//code.jquery.com/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="//cdn.rawgit.com/hilios/jQuery.countdown/2.2.0/dist/jquery.countdown.min.js"></script>


<div class="main-example">
  <p>
    Próximo ano será daqui:
  </p>
  <div class="countdown-container" id="main-example">
    <div class="time weeks flip">
      <span class="count curr top"></span>
      <span class="count next top"></span>
      <span class="count next bottom"></span>
      <span class="count curr bottom"></span>
      <span class="label">sem</span>
    </div>
    <div class="time days flip">
      <span class="count curr top"></span>
      <span class="count next top"></span>
      <span class="count next bottom"></span>
      <span class="count curr bottom"></span>
      <span class="label">dias</span>
    </div>
    <div class="time hours flip">
      <span class="count curr top"></span>
      <span class="count next top"></span>
      <span class="count next bottom"></span>
      <span class="count curr bottom"></span>
      <span class="label">horas</span>
    </div>
    <div class="time minutes flip">
      <span class="count curr top"></span>
      <span class="count next top"></span>
      <span class="count next bottom"></span>
      <span class="count curr bottom"></span>
      <span class="label">min</span>
    </div>
    <div class="time seconds">
      <span class="count curr top"></span>
      <span class="count next top"></span>
      <span class="count next bottom"></span>
      <span class="count curr bottom"></span>
      <span class="label">seg</span>
    </div>
  </div>
</div>

To achieve this, they used libraries jquery, jquery-countdown besides the library lodash, also uses the standard css library of jquery-countdown

/* Then I will try to understand the function used, and explain here */