jQuery Plugin - Hello World Example

by Kai_Draord

HTML

<div id="counter">
    <div class="sqs-col sqs-col-4 counter-value" data-count="179" data-desc="Days completed">0</div>
  <div class="sqs-col sqs-col-4 counter-value" data-count="437" data-desc="Projects Executed">0</div>
  <div class="sqs-col sqs-col-4 counter-value" data-count="31" data-desc="Satisfied Clients">0</div>
</div>

CSS

.counter-value { 
    font-size: 60px;
   line-height:1.2em;
   text-align:center;
   padding:2px 0;
 }
  .counter-value:after {
   content: attr(data-desc);
    display:block;
    text-transform:uppercase;
    font-size: 14px;
    line-height:1.5em;
  }

JavaScript

var a = 0;
$(window).on('load', function() {

   var oTop = $('#counter').offset().top - window.innerHeight;
  if (a == 0 && $(window).scrollTop() > oTop) {
    $('.counter-value').each(function() {
      var $this = $(this),
        countTo = $this.attr('data-count');
      $({
        countNum: $this.text()
      }).animate({
          countNum: countTo
        },
        {
          duration: 5000,
          easing: 'swing',
          step: function() {
            $this.text(Math.floor(this.countNum));
          },
          complete: function() {
            $this.text(this.countNum);
          }
        });
    });
    a = 1;
  }
});