Добрый день, всем и с праздников вас, коллеги!
Скажите пожалуйста, как можно запустить скрипт при прокрутке страницы?
Например у меня есть шапка сайта, затем секция слайдера и после секция с анимацией SVG
<div class="doing-lines">
<svg width="103" height="388" viewBox="0 0 104 390" fill="none" xmlns="http://www.w3.org/2000/svg" data-llp-composed="true" id="line" class="lazy-line-painter"> <path d="M104 389H1V0.5" data-llp-id="line-0" data-llp-duration="990" data-llp-delay="0" fill-opacity="0" style="" /></svg>
</div>
После есть скрипт работы самой svg:
(function () {
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
let el = document.querySelector('#line');
let myAnimation = new LazyLinePainter(el, {
"ease": "easeLinear",
"strokeWidth": 3.4,
"strokeOpacity": 0.3,
"strokeColor": "#ffffff",
"strokeCap": "square",
"delay": 260
});
myAnimation.paint();
}
}
})();
НО как сделать, так, чтобы анимация запускалась только когда я прокрутил к определенному блоку?
Пробовал так, но работает через раз...
var doing = $('.offer__arrows');
var doingTop = doing.offset().top;
$(window).bind('scroll', function () {
var windowTop = $(this).scrollTop();
if (windowTop > doingTop) {
(function () {
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
let el = document.querySelector('#line');
let myAnimation = new LazyLinePainter(el, {
"ease": "easeLinear",
"strokeWidth": 3.4,
"strokeOpacity": 0.3,
"strokeColor": "#ffffff",
"strokeCap": "square",
"delay": 260
});
myAnimation.paint();
}
}
})();
}
});
Спасибо!
