- 16, May 2024
- #1
В настоящее время я разрабатываю веб-сайт, где использовал некоторые технологии SVG! Однако у меня есть несколько значков SVG, которые анимируются при прокрутке, но это происходит, как только они появляются на экране! Проблема в том, что мне нужно, чтобы эти значки появлялись на экране, и вместо того, чтобы сразу запускать их, мне нужно подождать, пока пользователь прокрутит меня еще немного, а затем начать анимацию! это js, который я использовал:
$(окно).scroll(функция() {
рисовать линии();
});
функция drawLines(){
$.each($(".red-line"), function(i, val){
вар линия = значение;
drawLine($(это), линия);
});
}
функция drawLine(контейнер, линия){
длина вар = 0;
вар pathLength = line.getTotalLength();
var distanceFromTop =Container.offset().top - $(window).scrollTop();
var процентDone = 1 - (distanceFromTop / $(window).height());
длина = процентDone * pathLength;
line.style.strokeDasharray = [длина,pathLength].join(' ');
}
$(окно).scroll(функция() {
рисовать линии();
});
функция drawLines(){
$.each($(".red-line"), function(i, val){
вар линия = значение;
drawLine($(это), линия);
});
}
функция drawLine(контейнер, линия){
длина вар = 0;
вар pathLength = line.getTotalLength();
var distanceFromTop =Container.offset().top - $(window).scrollTop();
var процентDone = 1 - (distanceFromTop / $(window).height());
длина = процентDone * pathLength;
line.style.strokeDasharray = [длина,pathLength].join(' ');
}
![[themeforest] Eduma 3.1.1- Шаблон образования для WordPress](/assets/images/icons/forum1.png){kind=icon}
![[дмитрий Черёмушкин] Санкции Русал И En+. Что Нам Теперь Делать? (большой Видео Обзор) 10.04.2018](/assets/images/icons/forum0.png){kind=icon}
![[WOOTHEMES] 52 Woocommerce расширения + Updates](/assets/images/icons/forum6.png){kind=icon}