Анимация Circular Progress Bar-ов при прокрутке страницы
Приветствую, всех.
Очень нужна помощь с JS. Я создал Circular Progress Bar и анимировал его. Дело в том что анимация Progress Bar-ов происходит сразу. У меня задача состоит в том, чтобы сделать так чтобы анимация начиналась при скролле html страницы когда пользователь будет доходить до этих Progress Bar-ов. Так как этот блок может на странице размещаться или в середине страницы или в конце страницы. Текущий код находится по ссылке: https://codepen.io/AlmUA/pen/GReyJZr |
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
// Действия, когда элемент появляется в области видимости
console.log('Элемент появился в области видимости');
}
});
}, {
root: null, // используется viewport, для отслеживания в пределах другого элемента укажите его здесь
rootMargin: '0px', // маржа вокруг root
threshold: 1, // пороговое значение видимости (100% элемента)
});
observer.observe(barProducts);
|
rootMargin: '0px', // маржа вокруг root ruslan_mart, Это значение для общего блока где находятся bar-ы? |
// Действия, когда элемент появляется в области видимости
console.log('Элемент появился в области видимости');
ruslan_mart, Эту часть можно задокументировать? |
Цитата:
в new IntersectionObserver(() вводится класс с название общего блока в котором находятся Progress Bar-ы? |
let barProducts = document.querySelector(".bar__products"),
productsCount = document.querySelector(".bar__value-products"),
barClients = document.querySelector(".bar__clients"),
clientsCount = document.querySelector(".bar__clients-value");
let productsStartValue = 0,
productsEndValue = 95,
clientsStartValue = 0,
clientsEndValue = 85,
speed = 10;
const startProgress = () => {
let productsInterval = setInterval(() => {
productsStartValue++;
productsCount.innerHTML = `${productsStartValue}%`;
barProducts.style.background = `conic-gradient(#40DDB6 ${productsStartValue * 3.7}deg, #37393F 0deg)`;
if (productsStartValue == productsEndValue) {
clearInterval(productsInterval);
}
}, speed);
let clientsInterval = setInterval(() => {
clientsStartValue++;
clientsCount.innerHTML = `${clientsStartValue}%`;
barClients.style.background = `conic-gradient(#40DDB6 ${clientsStartValue * 3.6}deg, #37393F 0deg)`;
if (clientsStartValue == clientsEndValue) {
clearInterval(clientsInterval);
}
}, speed);
};
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
// сработает когда элемент будет виден на 90%
observer.disconnect();
startProgress();
}
});
}, {
root: null, // используется viewport, для отслеживания в пределах другого элемента укажите его здесь
rootMargin: '0px', // маржа вокруг root
threshold: 0.9, // пороговое значение видимости (90% элемента)
});
observer.observe(document.querySelector('.progress-bar__wrap'));
Вот так должно работать :) |
ruslan_mart,
Спасибо огромное. Все получилось |
ruslan_mart,
Начал тестировать. И перестало срабатывать. В коде ничего не менял Все разобрался |
ruslan_mart,
Могли бы помочь с таким вариантом чтобы срабатывало при скроле: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="css/style.css"> <title>lesson_#</title> </head> <body> <div class="wrapper"> <header class="header"> <div class="header__section section"> </div> </header> <main class="main"> <div class="main__section section"> <!-- ?Вариант #2 --> <div class="circular-bar"> <div class="circular-bar__block block-circular"> <div class="block-circular__products-inner bar-products"> <div class="bar-products__body"> <div class="bar-products__outer-item"> <div class="bar-products__inner-item"> <div id="bar-products__value">95%</div> </div> <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"> <circle cx="40" cy="40" r="36" stroke-linecap="round" /> </svg> </div> </div> <div class="bar-products__desc decs"> <div class="decs__paragraph">clients</div> <div class="decs__subcaption">quick response</div> </div> </div> <div class="block-circular__clients-inner bar-clients"> <div class="bar-clients__body"> <div class="bar-clients__outer-item"> <div class="bar-clients__inner-item"> <div id="bar-clients__value">85%</div> </div> <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"> <circle cx="40" cy="40" r="36" stroke-linecap="round" /> </svg> </div> </div> <div class="bar-clients__desc decs"> <div class="decs__paragraph">project</div> <div class="decs__subcaption">finished jobs</div> </div> </div> </div> </div> <!-- !Вариант #2 --> </div> </main> <footer class="footer"> <div class="footer__section section"></div> </footer> </div> <script src="js/script.js"></script> </body> </html>
let numberProducts = document.getElementById("bar-products__value");
let numberClients = document.getElementById("bar-clients__value");
let counterProducts = 0;
let counterClients = 0;
setInterval(() => {
if (counterProducts == 95) {
clearInterval();
} else {
counterProducts += 1;
numberProducts.innerHTML = counterProducts + "%";
}
}, 10);
setInterval(() => {
if (counterClients == 85) {
clearInterval();
} else {
counterClients += 1;
numberClients.innerHTML = counterClients + "%";
}
}, 10);
|
| Часовой пояс GMT +3, время: 08:45. |