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

Efeito Typewrite

Typewrite effect

View more

Verificar se existe e criando pastas

Checking for existing and creating folders

View more

Compactar arquivos com PHP

Compress files with PHP

View more