detect viewport visible

by alfannas

HTML

<div class="fake-div">
</div>
<div id="counter">
    <div class="counter-value" data-count="300">0</div>
    <div class="counter-value" data-count="401">100</div>
    <div class="counter-value" data-count="1500">200</div>
</div>
<div class="fake-div">
</div>

CSS

.fake-div {
  width:100%;
  height: 1280px;
  position:relative;
}

JavaScript

//https://codepen.io/dmcreis/pen/VLLYPo
//https://medium.com/talk-like/detecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2
var a = 0;
$(window).scroll(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: 2000,
          easing: 'swing',
          step: function() {
            $this.text(Math.floor(this.countNum));
          },
          complete: function() {
            $this.text(this.countNum);
            //alert('finished');
          }

        });
    });
    a = 1;
  }

});