animación de contador en ejemplo de código css

Este dilema se puede resolver de diferentes maneras, por lo tanto te damos la que en nuestra opinión es la solución más completa.

Ejemplo 1: números contando css

//HTML<div id="value">100</div>//CSS
div 
  font:80040px system-ui;//JavaScriptfunctionanimateValue(obj, start, end, duration)let startTimestamp =null;conststep=(timestamp)=>if(!startTimestamp) startTimestamp = timestamp;const progress =Math.min((timestamp - startTimestamp)/ duration,1);
    obj.innerHTML=Math.floor(progress *(end - start)+ start);if(progress <1)window.requestAnimationFrame(step);;window.requestAnimationFrame(step);const obj =document.getElementById("value");animateValue(obj,100,0,5000);

Ejemplo 2: contador de números html

functionanimateValue(obj, start, end, duration)let startTimestamp =null;conststep=(timestamp)=>if(!startTimestamp) startTimestamp = timestamp;const progress =Math.min((timestamp - startTimestamp)/ duration,1);
    obj.innerHTML=Math.floor(progress *(end - start)+ start);if(progress <1)window.requestAnimationFrame(step);;window.requestAnimationFrame(step);const obj =document.getElementById("value");animateValue(obj,0,1220,5000);const obj2 =document.getElementById("value2");animateValue(obj2,0,520,5000);

Sección de Reseñas y Valoraciones

Si te gustó nuestro trabajo, tienes la opción de dejar un ensayo acerca de qué le añadirías a este tutorial.

---

---

Utiliza Nuestro Buscador