Números animados

functions.js

/*========================================
=            Números Animados            =
========================================*/

$.fn.countTo = function(options) {
  // merge the default plugin settings with the custom options
  options = $.extend({}, $.fn.countTo.defaults, options || {});

  // how many times to update the value, and how much to increment the value on each update
  var loops = Math.ceil(options.speed / options.refreshInterval),
      increment = (options.to - options.from) / loops;

  return $(this).each(function() {
    var _this = this,
        loopCount = 0,
        value = options.from,
        interval = setInterval(updateTimer, options.refreshInterval);

    function updateTimer() {
      value += increment;
      loopCount++;
      $(_this).html(value.toFixed(options.decimals));

      if (typeof(options.onUpdate) == 'function') {
        options.onUpdate.call(_this, value);
      }

      if (loopCount >= loops) {
        clearInterval(interval);
        value = options.to;

        if (typeof(options.onComplete) == 'function') {
          options.onComplete.call(_this, value);
        }
      }
    }
  });
};

$.fn.countTo.defaults = {
  from: 0,  // the number the element should start at
  to: 100,  // the number the element should end at
  speed: 1000,  // how long it should take to count between the target numbers
  refreshInterval: 100,  // how often the element should be updated
  decimals: 0,  // the number of decimal places to show
  onUpdate: null,  // callback method for every time the element is updated,
  onComplete: null,  // callback method for when the element finishes updating
};

/**
 *
 * Counter
 *
 */

function bindNumbers() {
  console.log('rodou!');
  var number_01 = $('#number-01').data('number'),
      number_02 = $('#number-02').data('number'),
      number_03 = $('#number-03').data('number'),
      number_04 = $('#number-04').data('number');

  $('#number-01').countTo({
    from: 50,
    to: number_01,
    speed: 1000,
    refreshInterval: 50,
    onComplete: function(value) {
      // console.debug(this);
    }
  });

  $('#number-02').countTo({
    from: 50,
    to: number_02,
    speed: 2000,
    refreshInterval: 50,
    onComplete: function(value) {
      // console.debug(this);
    }
  });

  $('#number-03').countTo({
    from: 50,
    to: number_03,
    speed: 3000,
    refreshInterval: 100,
    onComplete: function(value) {
      // console.debug(this);
    }
  });

  $('#number-04').countTo({
    from: 50,
    to: number_04,
    speed: 4000,
    refreshInterval: 50,
    onComplete: function(value) {
      // console.debug(this);
    }
  });
}

var isBinded = false;

if ( $('#qwp-home-numbers').data('value') == true ) {

  var chegouNoBox = $('#qwp-home-numbers').offset().top - 500;

  $(window).scroll(function() {
    console.log('chegou');

    var distanciaDoTopo = $(window).scrollTop();

    if ( distanciaDoTopo >= chegouNoBox ) {
      if ( isBinded ) return;
      else {
        bindNumbers();
        isBinded = true;
      }
    }
  });
}

/*=====  End of Números Animados  ======*/