Estoy tratando de hacer que el siguiente contador de números comience solo una vez que se desplace y luego haga que se repita después de 10 segundos, ¿alguien podría ayudarme?
const counterAnim = (qSelector, start = 0, end, duration = 8000) => { const target = document.querySelector(qSelector); let startTimestamp = null; const step = (timestamp) => { if (!startTimestamp) startTimestamp = timestamp; const progress = Math.min((timestamp - startTimestamp) / duration, 1); target.innerText = Math.floor(progress * (end - start) + start); if (progress < 1) { window.requestAnimationFrame(step); } }; window.requestAnimationFrame(step); }; //#endregion - end of - number counter animation document.addEventListener("DOMContentLoaded", () => { counterAnim("#count1", 0, 10000,8000); counterAnim("#count2", 0, 40, 8000); counterAnim("#count3", 0, 5, 8000); }); <div class="ohio-heading-sc heading text-left" id="ohio-custom-61aa36a52809a"> <h2 class="title"><span id="count1" class="display-4"></span>+ </h2> <p class="subtitle">lorem ipsum</p> </div> <div class="ohio-heading-sc heading text-left" id="ohio-custom-61aa36a52809a"> <h2 class="title"><span id="count2" class="display-4"></span>+ YEARS</h2> <p class="subtitle">lorem ipsum</p> </div> <div class="ohio-heading-sc heading text-left" id="ohio-custom-61aa36a52809a"> <h2 class="title"><span id="count3" class="display-4"></span> YEAR</h2> <p class="subtitle">lorem ipsum</p> </div>Ya tiene la mayor parte de la configuración, solo necesita adjuntar sus primeras llamadas counterAnim a un oyente de desplazamiento y luego también iniciar un tiempo de espera para restablecer startTimestamp a nulo después de 10 segundos
let startTimestamp = null; const counterAnim = (qSelector, start = 0, end, duration = 8000) => { const target = document.querySelector(qSelector); const step = (timestamp) => { if (!startTimestamp) startTimestamp = timestamp; const progress = Math.min((timestamp - startTimestamp) / duration, 1); target.innerText = Math.floor(progress * (end - start) + start); if (progress < 1) { window.requestAnimationFrame(step); } }; // reset to the start condition. If you want this to happen multiple times, use setInterval setTimeout(() => { startTimestamp = null; }, 10000); window.requestAnimationFrame(step); }; document.addEventListener("scroll", () => { counterAnim("#count1", 0, 10000,8000); counterAnim("#count2", 0, 40, 8000); counterAnim("#count3", 0, 5, 8000); }