Mi página contiene un contador y quiero agregar un método que haga que el contador comience cuando se alcance una cierta altura. Calculé que quiero que el contador comience a la altura de 324 px, pero como tengo muy poca experiencia con JavaScript, no estoy seguro de lo que estoy buscando. ¿Alguien me puede ayudar?
Aquí está mi código actual:
const counters = document.querySelectorAll('.counter'); const speed = 2000; counters.forEach(counter => { const updateCount = () => { const target = +counter.getAttribute('data-target'); const count = +counter.innerText; const inc = target / speed; if (count < target) { counter.innerText = Math.ceil(count + inc); requestAnimationFrame(updateCount, 1); } else { count.innerText = target; } } updateCount(); }); <div class="container-b"> <div class="container"> <div class="row"> <div class="counters"> <div class="card-image" id="purple-b"> <i class="fas fa-users"></i> <div class="counter" data-target="231">0</div> <p class="card-b-text">Happy Users</p> </div> <div class="card-image" id="green-b"> <i class="fas fa-code"></i> <div class="counter" data-target="385">0</div> <p class="card-b-text">Issues Solved</p> </div> <div class="card-image" id="red-b"> <i class="fas fa-cog"></i> <div class="counter" data-target="159">0</div> <p class="card-b-text">Good Reviews</p> </div> <div class="card-image" id="orange-b"> <i class="fas fa-comments"></i> <div class="counter" data-target="127">0</div> <p class="card-b-text">Case Studies</p> </div> <div class="card-image" id="blue-b"> <i class="fas fa-rocket"></i> <div class="counter" data-target="211">0</div> <p class="card-b-text">Orders Received</p> <p></p> </div> </div> </div> </div> </div>No sé si esto es lo que estás buscando o no. Si está mal puedes describirlo más, porque no lo entiendo bien.
Digamos que tengo una página con 3000px CSS:
.counter{ height: 3000px; }Y quiero que cada vez que me desplace y pase los 324 px, hará algo por ti
const counters = document.querySelectorAll('.counter'); window.onscroll=function(){ if(scrollY >= 324){ console.log("Do your start count things or something in here") } }Lo haré de esta manera:
use el mismo requestAnimationFrame() para ambos elementos y deténgalo cuando no haya ninguno para actualizar
const speed = 2000 , counters = [...document.querySelectorAll('.counter')] .map(el=>( { el , target : +el.dataset.target , inc : (el.dataset.target / speed) , count : parseInt(el.textContent) })) ; requestAnimationFrame(updateCount) function updateCount() { let elmsRun = counters.length counters.forEach(({ el, target, inc, count}, i) => { el.textContent = counters[i].count = (count < target) ? Math.ceil(count+inc) : target if (counters[i].count === target) --elmsRun }) if (elmsRun) requestAnimationFrame(updateCount) }