Counting effect

Question

I’m looking for how to accomplish an effect I’ve seen lately on several websites. They consist of counting a certain number, ex: "There are more than 500 projects" to reach the 500 and made a count and in a few seconds shows the end which is 500. Here is a website that contains the effect http://easyone.com.br in our numbers section. I’m searching, but I don’t know the name of the effect.

Answer 1

One option is to create a loop using setTimeout to create a gap between the links.

var counter = document.getElementById('counter');

function increment(i, max){
  if(i > max) return;
  setTimeout(function(){
    counter.innerText = i;
    increment(i+1, max);
  },10)
}

increment(0,100);

<h1 id="counter">0</h1>

EDIT: Modified version to adapt to large numbers, the higher the number, the greater the step between exchanges.

var counter1 = document.getElementById('counter1');
var counter2 = document.getElementById('counter2');

function increment(i, max, element){
  if(i > max) return;
  setTimeout(function(){
    element.innerText = Math.round(i);
    increment(i+(max/100), max, element);
  },10)
}

increment(0,1500, counter1 );
increment(0,3000, counter2 );

<h1 id="counter1">0</h1>
<h1 id="counter2">0</h1>