Условия роботы counter-а

233

06 апреля 2017, 17:29

Не выходит сделать так что бы counter-up работал только при просмотре, в итоге загружается вместе со страницей. Можно ли вообще модифицировать этот вариант?

$('.counter').each(function() { 
  var $this = $(this), 
    countTo = $this.attr('data-count'); 
  $({ 
    countNum: $this.text() 
  }).animate({ 
    countNum: countTo 
  }, { 
    duration: 4000, 
    easing: 'linear', 
    step: function() { 
      $this.text(Math.floor(this.countNum)); 
    }, 
    complete: function() { 
      $this.text(this.countNum); 
    } 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="statistics"> 
  <div class="counter-up"> 
    <h1>Lorem ipsum.</h1> 
    <div class="wrap-flex"> 
      <div class="counter-cont-1"> 
        <span>Lorem ipsum.</span> 
        <span class="counter bg-count-1" data-count="25000">0</span> 
        <span>м<sup>2</sup></span> 
      </div> 
      <div class="counter-cont-3"> 
        <span>Lorem ipsum dolor.</span> 
        <span class="counter bg-count-1" data-count="180000">0</span> 
        <span>м<sup>3</sup></span> 
      </div> 
      <div class="counter-cont-2"> 
        <span>Lorem ipsum.</span> 
        <span class="counter bg-count-1" data-count="7">0</span> 
        <span class="year">лет</span> 
      </div> 
    </div> 
  </div> 
</div>

Answer 1

counterAnimate(); 
$(window).bind('scroll', counterAnimate); 
 
function counterAnimate() 
{ 
  var counterUp = $('.counter-up'), 
      win = $(window), 
      scroll = win.scrollTop(), 
      winHeight = win.height(), 
      counterUpPos = counterUp.offset().top, 
      counterUpHeight = counterUp.innerHeight(); 
       
  if(scroll + winHeight >= counterUpPos + counterUpHeight && scroll <= counterUpPos){ 
    win.unbind('scroll', counterAnimate); 
     
    $('.counter').each(function() { 
      var $this = $(this), 
        countTo = $this.attr('data-count'); 
      $({ 
        countNum: $this.text() 
      }).animate({ 
        countNum: countTo 
      }, { 
        duration: 4000, 
        easing: 'linear', 
        step: function() { 
          $this.text(Math.floor(this.countNum)); 
        }, 
        complete: function() { 
          $this.text(this.countNum); 
        } 
      }); 
    }); 
  } 
}

.statistics { margin-top: 1000px; } // Для наглядности

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="statistics"> 
  <div class="counter-up"> 
    <h1>Lorem ipsum.</h1> 
    <div class="wrap-flex"> 
      <div class="counter-cont-1"> 
        <span>Lorem ipsum.</span> 
        <span class="counter bg-count-1" data-count="25000">0</span> 
        <span>м<sup>2</sup></span> 
      </div> 
      <div class="counter-cont-3"> 
        <span>Lorem ipsum dolor.</span> 
        <span class="counter bg-count-1" data-count="180000">0</span> 
        <span>м<sup>3</sup></span> 
      </div> 
      <div class="counter-cont-2"> 
        <span>Lorem ipsum.</span> 
        <span class="counter bg-count-1" data-count="7">0</span> 
        <span class="year">лет</span> 
      </div> 
    </div> 
  </div> 
</div>