Blog

22 de June de 2023

Animated Counter

Contador Animado

To place an animated counter we will use HTML with JavaScript, remembering that later you can style it the way you want.

	<!-- 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>
Share:
Others

Tips

ShadowBox

ShadowBox

View more

Exemplo de PSD

PSD example

View more

wp_reset_query();

wp_reset_query();

View more