Blog

22 de junho de 2023

Contador Animado

Contador Animado

Para colocar um contador animado iremos utilizar o HTML com JavaScript, lembrando que depois você poderá estilizar do jeito desejado.

	<!-- HTML -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<div><span class="counter-up" data-count-to="5684"></span>,<span class="counter-up" data-count-to="51"></span></div>
	<div><span class="counter-up" data-count-to="6603146"></span></div>
	<div><span class="counter-up" data-count-to="20362"></span></div>
	<!-- JavaScript -->
	<script type="text/javascript">
		const tempo_intervalo = 5;
		const tempo = 4000;

		$('.counter-up').each(function() {  
	  		let contar_ate = parseInt($(this).data('countTo'));
	  		let intervalos = tempo / tempo_intervalo;
	  		let incremento = contar_ate / intervalos;
	  		let valor = 0;
	  		let el = $(this);
	  
	  		let timer = setInterval(function() {
	    			if (valor >= contar_ate){
	      				valor = contar_ate;
	      				clearInterval(timer);
	    			}
	    
				let texto = valor.toFixed(0).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.");
	    			el.text(texto);
	    			valor += incremento;      
	  		}, tempo_intervalo);
		});
	</script>
Compartilhe:
Outras

Dicas

Protótipo em site

Protótipo em site

Ver mais

Iniciando um Projeto em React

Iniciando um Projeto em React

Ver mais

ShortCode

ShortCode

Ver mais