Tengo una pregunta para responder. Quiero ejecutar la función animateValue cuando el usuario se desplaza a la ventana gráfica de un elemento, intenté usar getBoundingClientRect pero no funciona. Alguien sabe como solucionarlo o como hacerlo, me puede ayudar? Gracias chicos
(function () { var items = document.querySelector("#number"); function isElementInViewport(el) { var rect = el.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } if (isElementInViewport(items)) { function animateValue(obj, start, end, duration) { let startTimestamp = null; const step = (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"); const obj2 = document.getElementById("value2"); const obj3 = document.getElementById("value3"); const obj4 = document.getElementById("value4"); animateValue(obj, 0, 2000, 10000); animateValue(obj2, 0, 200, 10000); animateValue(obj3, 0, 98, 10000); animateValue(obj4, 0, 5, 10000); } window.addEventListener("load", animateValue); window.addEventListener("resize", animateValue); window.addEventListener("scroll", animateValue); })();