Error with jQuery animated number counter

Question

Error with jQuery animated number counter

Navigation

#1 by (0 votes)

1

Personally, how can I load the contactor only when the element is on the screen?

('.count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});

This is in the middle of the page, until it reaches the animation already finished

        <!-- num items -->
        <div class='col-sm-3'>
          <div class='num-items'>
            <span class='lnr lnr-rocket'/>
            <p class='counter_up'>1000</p>
            <h6>Amostra1</h6>
          </div>
        </div>

        <div class='col-sm-3'>
          <div class='num-items'>
            <span class='lnr lnr-smile'/>
            <p class='counter_up'>164</p>
            <h6>Amostra2</h6>
          </div>
        </div>

        <div class='col-sm-3'>
          <div class='num-items'>
            <span class='lnr lnr-layers'/>
            <p class='count'>964</p>
            <h6>Amostra3</h6>
          </div>
        </div>

        <div class='col-sm-3'>
          <div class='num-items'>
            <span class='lnr lnr-coffee-cup'/>
            <p class='count'>376</p>
            <h6>Amostra4</h6>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- ====== End Numbers ======  -->

javascript

asked by anonymous 12.01.2018 / 20:34

1 answer

Access prop in method with VueJS iframe after joomla article

score 0 · Answer 1

You can get the position of the element relative to the top of the window, detecting when the element appears when doing scroll with $(window).on("scroll".. .

Example (see explanations in code comments):

var ani_ini = false; // crio um flag para marcar que a animação iniciou
$(window).on('scroll', function(){
   var sc = $(window).scrollTop(); // valor do scroll da janela
   var el = $('.count').first(); // elemento que quero detectar (o primeiro da classe .count)
   var el_top = el.offset().top; // distância do elemento até o topo do documento
   var win_height = window.innerHeight; // altura visível da janela

   // verifico se o elemento apareceu subtraindo distância do elemento ao topo - scroll da janela
   if(el_top - sc <= win_height && !ani_ini){
      ani_ini = true; // mudo o status da variável (flag) para impedir que o loop se repita
      $('.count').each(function () {
          $(this).prop('Counter',0).animate({
              Counter: $(this).text()
          }, {
              duration: 4000,
              easing: 'swing',
              step: function (now) {
                  $(this).text(Math.ceil(now));
              }
          });
      });
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Role para baixo
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />

<div class='col-sm-3'>
    <div class='num-items'>
      <span class='lnr lnr-rocket'/>
      <p class='counter_up'>1000</p>
      <h6>Amostra1</h6>
    </div>
  </div>

  <div class='col-sm-3'>
    <div class='num-items'>
      <span class='lnr lnr-smile'/>
      <p class='counter_up'>164</p>
      <h6>Amostra2</h6>
    </div>
  </div>

  <div class='col-sm-3'>
    <div class='num-items'>
      <span class='lnr lnr-layers'/>
      <p class='count'>964</p>
      <h6>Amostra3</h6>
    </div>
  </div>

  <div class='col-sm-3'>
    <div class='num-items'>
      <span class='lnr lnr-coffee-cup'/>
      <p class='count'>376</p>
      <h6>Amostra4</h6>
    </div>
  </div>