Contadores Animados en Scroll con JavaScript y CSS

[@alfredomg1962]

Saludos desde Costa Rica, muchas gracias por compartir el tutorial, me ha servido mucho ! Pura vida.

[@brandon_xavier_cf8388]

Gran tutorial. Buen profesor. Entendi todo el proceso y el por que del código. !!!!GRACIAS!!!!

[@LexterDev]

Qué bueno, espero te haya servido. Un saludo.

[@louiseavilezx2b505]

Funcionó perfectamente amigo, eres el único vídeo (que yo sepa) que hace CASI lo que quiero que haga en mi proyecto personal. Si puedes darme un poco de tiempo respondiendo a este comentario ¡¡te lo agradeceré mucho!! Lo que necesito es que el contador se active pero de forma independiente, entiendo que es por que usas el jquerySelectorAll y obviamente se aplicará a todos los contadores, pero no sé como hacer para que cada contador se active de forma independiente (A base del scroll) si no entiendes, trataré de responder lo más rápido posible. ¡Muchas gracias igualmente!

[@LexterDev]

Entiendo. Y quieres que los contadores estén a la misma altura de scroll como en este ejemplo o estarán separados?

[@louiseavilezx2b505]

@@LexterDev por separado. Te pondré un poquito en contexto. Tengo un TimeLine en vertical, y cada cuadro o cada div tiene un contador que es el número de árboles sembrados, quiero que cuando llegue a cada contador se active solo los que estén en el ViewportHeight, no quiero que se activen todos entonces al seguir bajando ya aparecen con el número final sin animación.

[@LexterDev]

En realidad si tienes una clase asignada a cada div, con mi ejemplo funcionaría, ya que cada div responde al scroll y se muestra hasta que se ve en el viewport. No sé si yo estoy entendiendo mal 😅. Si gustas escríbeme a mi página de Facebook, el link está en la descripción y así ver más detalles.

[@Diego4322237]

Excelente video. me suscribo a este canal! Gracias!!

[@georgepaz145]

excelente funcionó sin problemas, lo explicaste de maravilla muchas gracias!!

[@solo-programadoresa.martin2602]

Muchas gracias por el vídeo. Explicado fantásticamente.

[@LexterDev]

Con gusto. Espero les haya servido. Un saludo bro.

[@yamilaprosdocimo2294]

GRACIAS!!!

[@johnmiltonmt5380]

Que biene, muchas gracias.

[@LexterDev]

Con gusto, espero te sirva bro. Saludos.

[@sebastianmostazo6277]

GENIO

[@luisenriqueramirezavila5692]

/*DE NADA */ CSS .contador{ font-size: 30px; } @keyframes aparecer{ 0%{ transform: translateY(50px); } 100%{ transform: translateY(0px); } } .ocultar{ opacity: 0; } .animar{ animation: aparecer 3s ; opacity: 1; } HTML5 0 0 0 JS addEventListener('DOMContentLoaded', ()=>{ const contadores = document.querySelectorAll('.contador_cantidad'); const velocidad = 1000; const animarContadores = () =>{ for(const contador of contadores){ const actualizar_contador =() =>{ let cantidad_maxima = +contador.dataset.cantidadTotal, valor_actual = +contador.innerText, incremento = cantidad_maxima / velocidad; if(valor_actual < cantidad_maxima){ contador.innerText = Math.ceil(valor_actual + incremento) setTimeout((actualizar_contador), 5); }else{ contador.innerText = cantidad_maxima; } } actualizar_contador(); } } const mostrarContadores = elementos =>{ elementos.forEach(element => { if(element.isIntersecting){ element.target.classList.add('animar'); element.target.classList.remove('ocultar'); setTimeout(animarContadores, 300) } }); } const observer = new IntersectionObserver(mostrarContadores, { threshold: 0.75 //0 - 1 }) const elementosHTML = document.querySelectorAll('.contador') elementosHTML.forEach(elementoHTML =>{ observer.observe(elementoHTML) }) })

[@lali0050]

gracias !!! con tu js me funciono

[@vivito002]

Hola qué tal? Podrías subir el código html y CSS de todo el proceso? Muchas gracias. Un saludo

[@darksmostt4257]

Muchas gracias bro, Dios te bendigaaaa, ¿Se pueden hacer donaciones?

[@MrLukiiTa]

hola, me funciona bien pero no me aparecen los contadores cuando scrolleo hacia abajo.. tengo que modificar algo del codigo para que recien aparezcan.. que puede ser? Gracias me ayudaste mucho

[@STEVENMETAL100]

Amigo, muchas gracias. Como puedo hacer para que el innerText vuelva a 0 para que cada vez que llegue a ese punto se ejecute el contador? Gracias

[@juniorvilca1253]

excelente video, tengo una consulta si en el contador tengo solo dos numeros 5500 y 54, el 54 carga muy rapido, hay alguna forma que todos carguen al mismo ritmo? ayuda :c

[@leocarpinteyro5170]

Yo igual queria aplicar algo asi, lo intente por mi cuenta pero no pude, tu lo haz logrado??

[@mathias_dev]

Lo adapte a React js, pero el contador se me ejecuta la cantidad de veces que pasa por el Foreach, de que forma puedo hacer para que se ejecute solo una vez

[@mathias_dev]

para los que tienen la misma duda lo solucione colocando un contador, cuando llega a 1 no me ejecuta mas la funcion animar contadores.

[@miguelangelmadronerosequei9517]

bro me puedes pasar el link de github de este codigo?

[@tuguiacolombia5988]

necesito ayuda no me funciona y no encuentro el error te puedo escribir por facebook

[@LexterDev]

Claro, puedes hacerlo.

[@SantiagoSoriano]

Alguien tendra elcodigo de JS. al cargar la pagina me sale "NaN" en el contador.

[@juanfranco7259]

me pasaba lo mismo, tuve dos errores en mi ejercicio. El primero fue que mis números estaban separados por una coma en el data atribute desde HTML, deben ser únicamente números, sin letras o símbolos. Dos. Hay una parte en el tutorial en la que menciona que para que el string se convierta en entero agreguemos el signo (+) en esa función, a mi eso no me funcionó, en su lugar utilicé la opción de parseInt(), y con eso quedó solucionado

[@josephgamarra361]

@@juanfranco7259 ya revise esos 2 puntos que mencionas pero aún asi me aparece NaN, a que te refieres con que tus números estaban separados por una coma?

[@juanfranco7259]

@@josephgamarra361 si quieres poner cantidades en miles no debes usar la coma por ejemplo poner 5000 y no 5,000

[@LuisCastilloLuisCastill0]

y la coma?

[@LexterDev]

¿Cuál coma brother? Si hablas del punto y coma, desde ECMAScript 6 es opcional.

[@LuisCastilloLuisCastill0]

@@LexterDev Hola, me refiero a 1,000 en lugar de 1000

[@mathias_dev]

@@LuisCastilloLuisCastill0 Podes usar FormatNumber de JS para dar los decimales

[@jonatelo96]

@@mathias_dev Hola justo tengo esa pregunta, tienes alguna idea de como hacerlo, soy nuevo en javascript

[@jonatelo96]

@@LuisCastilloLuisCastill0 Encontraste la solución?, también tengo la misma pregunta.