Анимированный счетчик чисел — отличный способ привлечь внимание пользователя к важной статистике на сайте, будь то количество успешных проектов, довольных клиентов или объем обработанных данных. В этой статье мы разберем, как создать плавный и производительный счетчик на чистом JavaScript (Vanilla JS) без использования тяжелых сторонних библиотек.
Видеоинструкция
Шаг 1: Создаем разметку HTML
Для начала подготовим простую HTML-структуру. Мы будем использовать data-атрибут для хранения целевого значения счетчика:
<div class='counter-container'>
<span class='counter' data-target='1500'>0</span>
<p>Выполненных проектов</p>
</div>Шаг 2: Добавляем стили CSS
Сделаем наш счетчик визуально привлекательным с помощью базовых стилей CSS:
.counter-container {
text-align: center;
font-family: Arial, sans-serif;
margin: 50px;
}
.counter {
font-size: 4rem;
font-weight: bold;
color: #007bff;
}Шаг 3: Пишем скрипт на JavaScript
Для плавной анимации мы используем метод requestAnimationFrame. Нажмите Ctrl + Shift + I в браузере, чтобы открыть консоль разработчика и протестировать этот код:
const counter = document.querySelector('.counter');
const target = +counter.getAttribute('data-target');
const duration = 2000; // Время анимации в миллисекундах
let startTime = null;
const animate = (timestamp) => {
if (!startTime) startTime = timestamp;
const progress = timestamp - startTime;
const current = Math.min(Math.floor((progress / duration) * target), target);
counter.textContent = current;
if (progress < duration) {
requestAnimationFrame(animate);
}
};
requestAnimationFrame(animate);Важно: Не используйте setInterval для анимации чисел. Это может привести к подергиванию интерфейса (layout thrashing) и ухудшению производительности на мобильных устройствах.
Дополнительно: Оптимизация через Intersection Observer
Чтобы счетчик запускался только тогда, когда пользователь доскроллил до него, используйте Intersection Observer API. Это сэкономит ресурсы процессора и сделает появление анимации своевременным.
Частые ошибки / Устранение неполадок
- Счетчик не запускается: Проверьте консоль разработчика. Убедитесь, что скрипт подключен после HTML-разметки или обернут в событие
DOMContentLoaded. - Вместо чисел выводится NaN: Убедитесь, что значение в
data-targetявляется числом и не содержит лишних пробелов или букв. - Слишком быстрая анимация: Отрегулируйте переменную
durationв коде JavaScript.
Интерактивность за пределами веб-страниц
Если вы хотите перенести интерактивность в презентации, узнайте, как создается Невидимая кнопка в PowerPoint: Создаем кликабельные зоны. Для любителей геймификации также будет полезна статья о том, Как сделать презентацию с пазлом для игры в PowerPoint. А если вам нужно импортировать сложные расчеты для отчетов, прочитайте, Как вставить таблицу Excel с возможностью редактирования.
Часто задаваемые вопросы
Можно ли сделать счетчик без JavaScript?
Да, с помощью CSS-свойств @keyframes и counter-reset, но JS дает больше контроля над плавностью и условиями запуска.
Как добавить разделители тысяч в счетчик?
Используйте метод toLocaleString() при выводе текущего значения числа в JavaScript для форматирования.
