Estou em busca de como realizar um efeito que tenho visto ultimamente em vários sites. Consistem em fazer a contagem de um determinado numero, ex: "São mais de 500 projetos" para chegar no 500 e feito uma contagem e em alguns segundos mostra o fim que é 500. Segue um site que contém o efeito http://easyone.com.br na seção nossos números. Estou em busca, mas não sei o nome do efeito.
1 Resposta
Uma opção é criar um loop utilizando setTimeout
para criar um intervalo entre os laços.
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: Versão modificada para se adaptar à numeros grandes, quanto maior o numero, maior é o passo entre as trocas.
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>
-
-
Opa, que bom. Adicionei uma versão nova que mantém uma média do tempo da animação, mesmo para números muito grandes. 10/05/2019 às 16:23
-