<section class="counter num">
  <div class="container">
    <div class="row">


  
      <?php if( have_rows('counter') ): ?>
      <?php while( have_rows('counter') ): the_row(); ?>

          <div class="number col-6 col-sm-6 col-md-3">
            <div class="box">
              <img alt="" src="<?php the_sub_field('img'); ?> ">
              <h1> <span class="counter-number " data-count="<?php the_sub_field('num'); ?>">0</span><?php the_sub_field('id'); ?></h1>
              <h3> <?php the_sub_field('name'); ?> </h3>
            </div>
          </div>

      <?php endwhile; ?>
      <?php endif; ?> 




      </div><!--  -->
    </div><!--  -->
</section><!-- claint -->





<script type="text/javascript">
/******************/


   var a = 0;
    $(window).scroll(function() {
        var oTop = $('.num').offset().top - window.innerHeight;
        if (a == 0 && $(window).scrollTop() > oTop) {
            $('.counter-number').each(function() {
                var $this = $(this),
                    countTo = $this.attr('data-count');
                $({
                    countNum: $this.text()
                }).animate({
                        countNum: countTo
                    },
                    {
                        duration: 3000,
                        easing: 'swing',
                        step: function() {
                            $this.text(Math.floor(this.countNum));
                        },
                        complete: function() {
                            $this.text(this.countNum);
                            //alert('finished');
                        }
                    });
            });
            a = 1;
        }
    });
    </script>




