Number count according to page scroll jQuery!

Question

Number count according to page scroll jQuery!

Navigation

#1 by (1 votes)

1

Personal I have a PROGRESS BAR that displays numbers from 0% up to 100%, I need when the scroll is greater than 900px, start counting the numbers for example from 0% to 70% in the time of 2 seconds .. I have a code here is working fine .. it does the count only if I move the scroll of the page again it remaps the count .. I need the animation to be done only once only after the user exceeds the 900px of scroll .. follows the code:

if(scrollTop > 900) {
  $('#front-bar').animate({ width: "70%" }, 2000);
  // Percent count
  $({ counter: 0 }).animate({ counter: 70 }, {
    duration: 2000,
    step : function(){
      $('#front-bar-count').text(Math.ceil(this.counter) + ' %');
    }
  });
}

javascript jquery

asked by anonymous 26.07.2017 / 02:05

1 answer

Many to many relationship with select multiple in Laravel How to limit IPs that can connect remotely to mysql?

score 1 · Accepted Answer

You can use an auxiliary variable to control whether you have already done the animation and test the variable before animating.

Example:

var animacaoFeita = false;

$(window).scroll(function(){ //função de interpretação de evento de scrolling
  ...
  if(scrollTop > 900 && animacaoFeita == false) {
    animacaoFeita = true; //colocar como já feita para não fazer da próxima vez
    $('#front-bar').animate({ width: "70%" }, 2000);
    // Percent count
    $({ counter: 0 }).animate({ counter: 70 }, {
      duration: 2000,
      step : function(){
        $('#front-bar-count').text(Math.ceil(this.counter) + ' %');
      }
    });
  }
  ..
}