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

Explorando Categorias no WordPress

Explorando Categorias no WordPress

View more

Pseudo-Elementos

Pseudo-Elements

View more

Pop-up de Cookies

Cookies pop-up

View more