-1

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
  • Muito obrigado pelo retorno. Não tinha procurado com essa informação. 10/05/2019 às 16:03

1 Resposta 1

1

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>

3
  • Muito obrigado. Isso mesmo que precisava. 10/05/2019 às 16:05
  • 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
  • Show. Novamente muito obrigado 10/05/2019 às 17:02

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .