Counter

by Alvin Olavarrieta

HTML

<div class="container">
  <div class="col_fourth">
    <div class="at-funfact-wrap">
      <div class="at-funfact">
        <span data-number="78" class="funfact-number">78</span>
        <h5 style="font-size: 12px; color: #000000" class="funfact-number-title">PORTFOLIO WORKED</h5>
      </div>
    </div>
  </div>
  <div class="col_fourth">
    <div class="at-funfact-wrap">
      <div class="at-funfact">
        <span data-number="97" class="funfact-number">97</span>
        <h5 style="font-size: 12px; color: #000000" class="funfact-number-title">AWARD WON</h5>
      </div>
    </div>
  </div>
  <div class="col_fourth">
    <div class="at-funfact-wrap">
      <div class="at-funfact">
        <span data-number="35" class="funfact-number">35%</span>
        <h5 class="funfact-number-title">CUPS OF COFFEE</h5>
      </div>
    </div>
  </div>
  <div class="col_fourth end">
    <div class="at-funfact-wrap">
      <div class="at-funfact">
        <span data-number="130" class="funfact-number">130+</span>
        <h5 class="funfact-number-title">HOME DEMO</h5>
      </div>
    </div>
  </div>
</div>

CSS

.container {
  max-width: 1200px !important;
  margin: 100px auto;
  font-family: "Montserrat";
}

.container {
  box-sizing: border-box;
  margin-left: auto !important;
  margin-right: auto !important;
}

/*-=-=-=-=-=-=-=-=-=-*/
/* Column Grids */
/*-=-=-=-=-=-=-=-=-= */

.col_fourth {
  background-color: #f1f1f1;
  width: 23.5%;
  position: relative;
  display: inline;
  display: inline-block;
  float: left;
  margin-right: 2%;
  margin-bottom: 20px;
}

.end {
  margin-right: 0 !important;
}

/*-=-=-=-=-=-=-=-=-=-*/
/* Style column 1 */
/*-=-=-=-=-=-=-=-=-= */

.at-funfact-wrap {
  background-color: #f1f1f1;
  padding: 40px 15px;
  text-align: center;
}

.at-funfact-wrap .at-funfact {
  padding: 0;
}

.at-funfact {
  display: inline-block;
  position: relative;
  padding: 20px 0;
  text-align: center;
}

.at-funfact-wrap .at-funfact .funfact-number {
  display: block;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 15px;
  font-size: 60px;
}

.at-funfact-wrap .at-funfact .funfact-number-title {
  margin: 0;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 2px;
  font-size: 14px;
}

JavaScript

jQuery('.funfact-number').each(function() {
  var $this = jQuery(this);
  var parts = $this.text().match(/^(\d+)(.*)/);
  if (parts.length < 2) return;

  var scale = 20;
  var delay = 50;
  var end = 0 + parts[1];
  var next = 0;
  var suffix = parts[2];

  var runUp = function() {
    var show = Math.ceil(next);
    $this.text('' + show + suffix);
    if (show == end) return;
    next = next + (end - next) / scale;
    window.setTimeout(runUp, delay);
  }
  runUp();
});