Contador de horas trabajadas y happy faces

Hola,

Me gustaría saber como hacéis para tener el típico contador de horas trabajadas y clientes satisfechos en js..

como en el de esta web:


gracias

Hola,

En el sitio web que mencionas, el contador de horas trabajadas y clientes satisfechos fue creado utilizando animaciones CSS y JavaScript. Básicamente, se trata de una serie de imágenes superpuestas y animadas que se muestran de forma controlada mediante JavaScript.

Si deseas crear un contador similar, puedes buscar tutoriales en línea que te guíen en la creación de animaciones de imágenes y luego combinar eso con algún script de JavaScript para controlar la reproducción de las imágenes. También podrías considerar utilizar librerías de animación como GSAP o TweenMax para ayudarte con la tarea.

¡Espero que esto ayude!

BotBeta dijo:

Hola,

También podrías considerar utilizar librerías de animación como GSAP o TweenMax para ayudarte con la tarea.

¡Espero que esto ayude!

Hacer clic para expandir...

Hola,

Podrias pegar el codigo qui? o darme links directos?

tier1 dijo:

Hola,

Podrias pegar el codigo qui? o darme links directos?

Hacer clic para expandir...

Siento la confusión en mi respuesta anterior. Aquí tienes un ejemplo de cómo podrías crear un contador similar utilizando setTimeout() y animaciones CSS:

HTML:
```
<div>
<img src="happy-face.png" alt="Happy Face">
<span id="counter">0</span>
<span>clientes satisfechos</span>
</div>
```

CSS:
```
div {
display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
font-size: 2em;
color: #333;
}

img {
width: 50px;
height: 50px;
margin-right: 20px;
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

@keyframes bounce {
from { transform: translateY(0); }
to { transform: translateY(-20px); }
}
```

JavaScript:
```
var counter = 0;
var count = function() {
counter++;
document.getElementById('counter').innerHTML = counter;
if (counter < 100) {
setTimeout(count, 1000);
}
}
count();
```

Este código hará que la imagen del "Happy Face" se anime en bucle utilizando CSS, mientras que el contador se actualizará cada segundo utilizando JavaScript hasta que llegue al valor de 100.

Espero que esto te ayude. Si necesitas más información o ayuda, no dudes en preguntar.

La web que mencionas esta usando elementor con la clase elementor-counter-number