Форум

MorenO410 · #1 (**permalink**) 28.01.2024, 13:22

Приветствую, всех.
Очень нужна помощь с JS.
Я создал Circular Progress Bar и анимировал его. Дело в том что анимация Progress Bar-ов происходит сразу.
У меня задача состоит в том, чтобы сделать так чтобы анимация начиналась при скролле html страницы когда пользователь будет доходить до этих Progress Bar-ов. Так как этот блок может на странице размещаться или в середине страницы или в конце страницы.

Текущий код находится по ссылке: https://codepen.io/AlmUA/pen/GReyJZr

ruslan_mart · #2 (**permalink**) 28.01.2024, 13:53

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);

MorenO410 · #3 (**permalink**) 28.01.2024, 13:57

rootMargin: '0px', // маржа вокруг root

ruslan_mart,
Это значение для общего блока где находятся bar-ы?

MorenO410 · #4 (**permalink**) 28.01.2024, 13:58

// Действия, когда элемент появляется в области видимости
            console.log('Элемент появился в области видимости');

ruslan_mart,
Эту часть можно задокументировать?

MorenO410 · #5 (**permalink**) 28.01.2024, 14:00

Сообщение от ruslan_mart

const observer = new IntersectionObserver(() =>

ruslan_mart,
в new IntersectionObserver(() вводится класс с название общего блока в котором находятся Progress Bar-ы?

ruslan_mart · #6 (**permalink**) 28.01.2024, 14:11

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'));

Вот так должно работать

MorenO410 · #7 (**permalink**) 28.01.2024, 14:21

ruslan_mart,

Спасибо огромное. Все получилось

MorenO410 · #8 (**permalink**) 29.01.2024, 01:34

ruslan_mart,

Начал тестировать. И перестало срабатывать. В коде ничего не менял
Все разобрался

MorenO410 · #9 (**permalink**) 29.01.2024, 01:50

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);

Форум

Справочник

Discord чат

Курсы javascript