Как запустить код только когда доскроллил до него (js без библиотек)
Есть анимация которая должна запускаться только когда доскроллил до нее, искал в интернете как сделать, так и не разобрался:( Нужно на чистом JS
function playNumber(one, two, three, four, five, six, seven, eight, nine, ten, selector ) {
const number = document.querySelector(selector);
let current = 0;
setInterval(() => {
if(current <= six) {
number.innerHTML = current++;
}
}, one);
setInterval(() => {
if(current <= seven) {
number.innerHTML = current++;
}
}, two);
setInterval(() => {
if(current <= eight) {
number.innerHTML = current++;
}
}, three);
setInterval(() => {
if(current <= nine) {
number.innerHTML = current++;
}
}, four);
setInterval(() => {
if(current <= ten) {
number.innerHTML = current++;
}
}, five);
}
playNumber(5, 40,200,500,2000,120,140,147,149,150, '.numberOne');
playNumber(0, 20,100,300,2000,900,980,990,999,1000, '.numberTwo');
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div class="service__info__inner__right__one">
<p class="service__info__inner__right__number"><span class="numberOne"></span>%</p>
<p class="service__info__inner__right__text">увеличение прибылей при грамотном использовании соцсетей</p>
</div>
<div class="service__info__inner__right__two">
<p class="service__info__inner__right__number"><span class="numberTwo"></span>+</p>
<p class="service__info__inner__right__text">новых клиентов приходят через соцсети каждый месяц</p>
</div>
Ответы (1 шт):
Автор решения: Tina Gordienko_Drog
→ Ссылка
нужно всего-лишь смотреть, доскролили ли мы до конца страницы
function playNumber(one, two, three, four, five, six, seven, eight, nine, ten, selector ) {
const number = document.querySelector(selector);
let current = 0;
setInterval(() => {
if(current <= six) {
number.innerHTML = current++;
}
}, one);
setInterval(() => {
if(current <= seven) {
number.innerHTML = current++;
}
}, two);
setInterval(() => {
if(current <= eight) {
number.innerHTML = current++;
}
}, three);
setInterval(() => {
if(current <= nine) {
number.innerHTML = current++;
}
}, four);
setInterval(() => {
if(current <= ten) {
number.innerHTML = current++;
}
}, five);
}
let isPlayed = false;
document.getElementById('test').addEventListener('scroll', (e) => {
const {scrollHeight, clientHeight, scrollTop} = e.target;
if (!isPlayed && scrollHeight - (clientHeight + scrollTop) < 100) {
playNumber(5, 40,200,500,2000,120,140,147,149,150, '.numberOne');
playNumber(0, 20,100,300,2000,900,980,990,999,1000, '.numberTwo');
isPlayed = true;
}
});
.test-container {
width: 100vw;
height: 100vh;
overflow: scroll;
}
<div id="test" class="test-container">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div class="service__info__inner__right__one">
<p class="service__info__inner__right__number"><span class="numberOne"></span>%</p>
<p class="service__info__inner__right__text">увеличение прибылей при грамотном использовании соцсетей</p>
</div>
<div class="service__info__inner__right__two">
<p class="service__info__inner__right__number"><span class="numberTwo"></span>+</p>
<p class="service__info__inner__right__text">новых клиентов приходят через соцсети каждый месяц</p>
</div>
</div>