Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.01.2024, 13:22
Интересующийся
Отправить личное сообщение для MorenO410 Посмотреть профиль Найти все сообщения от MorenO410
 
Регистрация: 18.01.2024
Сообщений: 21

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

Текущий код находится по ссылке: https://codepen.io/AlmUA/pen/GReyJZr
Ответить с цитированием
  #2 (permalink)  
Старый 28.01.2024, 13:53
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

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

Последний раз редактировалось ruslan_mart, 28.01.2024 в 14:11.
Ответить с цитированием
  #3 (permalink)  
Старый 28.01.2024, 13:57
Интересующийся
Отправить личное сообщение для MorenO410 Посмотреть профиль Найти все сообщения от MorenO410
 
Регистрация: 18.01.2024
Сообщений: 21

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


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

Последний раз редактировалось MorenO410, 28.01.2024 в 14:01.
Ответить с цитированием
  #4 (permalink)  
Старый 28.01.2024, 13:58
Интересующийся
Отправить личное сообщение для MorenO410 Посмотреть профиль Найти все сообщения от MorenO410
 
Регистрация: 18.01.2024
Сообщений: 21

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


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

Последний раз редактировалось MorenO410, 28.01.2024 в 14:01.
Ответить с цитированием
  #5 (permalink)  
Старый 28.01.2024, 14:00
Интересующийся
Отправить личное сообщение для MorenO410 Посмотреть профиль Найти все сообщения от MorenO410
 
Регистрация: 18.01.2024
Сообщений: 21

Сообщение от ruslan_mart
const observer = new IntersectionObserver(() =>
ruslan_mart,
в new IntersectionObserver(() вводится класс с название общего блока в котором находятся Progress Bar-ы?
Ответить с цитированием
  #6 (permalink)  
Старый 28.01.2024, 14:11
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

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, 28.01.2024 в 14:13.
Ответить с цитированием
  #7 (permalink)  
Старый 28.01.2024, 14:21
Интересующийся
Отправить личное сообщение для MorenO410 Посмотреть профиль Найти все сообщения от MorenO410
 
Регистрация: 18.01.2024
Сообщений: 21

ruslan_mart,

Спасибо огромное. Все получилось
Ответить с цитированием
  #8 (permalink)  
Старый 29.01.2024, 01:34
Интересующийся
Отправить личное сообщение для MorenO410 Посмотреть профиль Найти все сообщения от MorenO410
 
Регистрация: 18.01.2024
Сообщений: 21

ruslan_mart,

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

Последний раз редактировалось MorenO410, 29.01.2024 в 01:38.
Ответить с цитированием
  #9 (permalink)  
Старый 29.01.2024, 01:50
Интересующийся
Отправить личное сообщение для MorenO410 Посмотреть профиль Найти все сообщения от MorenO410
 
Регистрация: 18.01.2024
Сообщений: 21

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);
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Появление/исчезновение элемента при прокрутке страницы JQuery 0leg9 Общие вопросы Javascript 37 21.09.2017 07:41
Загрузка "хвоста" страницы при прокрутке из внешних файлов. Begoian Events/DOM/Window 10 23.01.2014 19:53
Прижимание блока при прокрутке страницы byFahrenheit Общие вопросы Javascript 2 14.01.2013 14:03
Фиксация объекта при скрулинге страницы Pashok(one) Общие вопросы Javascript 10 08.01.2013 02:52
Как при прокрутке страницы оставлять элемент на месте? FRIE jQuery 1 02.08.2012 20:54