Анимированный счетчик

Как работает расширение

• Вы создаете в Taptop текстовый блок, задаете ему CSS-класс и указываете параметры анимации в генераторе кода. Вы можете настроить длительность и плавность анимации, задержку перед стартом, повторение эффекта, а также форматирование чисел.

• Сгенерированный код сам находит этот блок и запускает счетчик при появлении элемента в поле зрения пользователя или сразу после загрузки страницы — в зависимости от выбранных настроек.

Как работать с инструкцией

Для настройки расширения вам нужно:

1. На платформе Taptop — создать элемент, в котором будет отображаться число, и присвоить ему CSS-класс, а также вставить полученный код в настройках страницы.

2. В генераторе кода (в правой части страницы) — настроить параметры счетчика и сгенерировать код.

Установка расширения на сайт

Шаг 1: Подготовьте счетчик в Taptop

1. Создайте элемент для счетчика: Добавьте на страницу Taptop текстовый блок (Text Block) или любой другой элемент (Div Block), в котором должен будет отображаться счетчик. Вы можете указать в текстовом блоке начальное значение счетчика (например, "0") или оставить его пустым — скрипт заменит это значение в процессе анимации.

2. Присвойте элементу уникальный CSS-класс: Например, profit-counter. Этот класс вы укажете в настройках генератора на следующем шаге.

Чтобы присвоить класс элементу:

1. Выберите элемент, а затем на панели стилей в поле Источники стилей введите нужное название класса и нажмите Enter.

   

   Введите название класса

2. Класс будет присвоен элементу и отобразится в поле Источники стилей.

   

   Класс присвоен элементу

   💡 Если вы планируете использовать несколько счетчиков с разными настройками на одной странице, каждому из них потребуется свой уникальный CSS-класс.

3. Стилизуйте счетчик: Настройте внешний вид (шрифт, размер, цвет, выравнивание) этого элемента с помощью панели стилей. Скрипт будет анимировать только числовое значение внутри, стили останутся без изменений.

Шаг 2: Настройте параметры в генераторе и сгенерируйте код

1. Перейдите к генератору (в правой части страницы с данной инструкцией).

2. Настройте целевой элемент и значения счетчика

   • CSS-класс целевого элемента: Укажите CSS-класс (или несколько классов через запятую), который вы присвоили элементу счетчика в Taptop. Введите имя класса точно так же, как оно указано в Taptop (без точки).

   • Начальное значение: Укажите число, с которого начнется анимация счетчика при его запуске. Например, 0 для анимации "с нуля". Вы можете задать любое число, если хотите, чтобы счетчик стартовал с другого значения.

   • Конечное значение: Укажите число, на котором анимация счетчика остановится (если не включен циклический режим).

3. Настройте анимацию
   В этой секции настраивается динамика и характер движения цифр.

   • Длительность анимации (мс): Задайте общее время, за которое счетчик пройдет путь от начального до конечного значения. Время указывается в миллисекундах (1000мс = 1 секунда). Подберите значение, которое выглядит естественно для вашей задачи. Слишком быстрая анимация может быть незаметной, слишком медленная — утомительной.

   • Задержка перед стартом (мс): Задайте паузу в миллисекундах до начала анимации. Пауза будет отсчитываться после выполнения условия запуска (например, появления в области видимости). Это полезно, если нужно синхронизировать старт нескольких анимаций или дать пользователю время сфокусироваться на элементе.

   • Функция плавности: Настройте характер ускорения и замедления анимации. Разные функции плавности создают разные «ощущения» от движения цифр (например, плавное начало и конец, резкое ускорение и т.д.). Выберите функцию из выпадающего списка. Ease Out Quad (стандартная) обычно дает приятный эффект замедления к концу анимации. Эта опция недоступна и не применяется, если включен "Эффект Одометра".

   Интерактивная шпаргалка по функциям плавности: https://easings.net/ru

   

   Примеры функций плавности

4. Настройте форматирование и отображение чисел
   Эти настройки отвечают за внешний вид самого числа и дополнительных символов.

   • Текстовый префикс: Введите символы или текст, которые будут отображаться непосредственно перед анимированным числом. Полезно для указания валюты, знаков "плюс" или "минус", или других обозначений. Примеры: $, +, около.

     

     Префикс (слева)

   • Текстовый суффикс: Введите символы или текст, которые будут отображаться непосредственно после анимированного числа. Часто используется для знака процента, единиц измерения, символа "+". Примеры: %, клиентов, +.

     

     Суффикс (справа) с указанием валюты

   • Количество десятичных знаков: Укажите, сколько цифр будет отображаться после десятичной точки. Доступны значения от 0 до 5 (целое число). Установите 0 для целых чисел. Для денежных сумм часто используют 2. В режиме одометра анимируется только целая часть числа. Дробная часть будет отображена статически (не перелистываясь).

     

     Десятичные знаки разделяются точкой

   • Использовать разделитель тысяч: Выберите, если хотите автоматически разделять группы разрядов в больших числах (например, "1 000 000" вместо "1000000") для улучшения читаемости.

   • Символ разделителя тысяч: Поле появляется, если включена опция "Использовать разделитель тысяч". Выберите, какой символ будет использоваться для разделения групп разрядов.

     • Запятая → 1,000,000

     • Пробел → 1 000 000

     • Точка → 1.000.000
       

       

       Разделитель запятая

5. Настройте поведение счетчика
   Здесь настраиваются условия запуска и повторения анимации.

   • Запуск при появлении в области видимости: Если опция включена, анимация начнется только тогда, когда элемент счетчика станет видим пользователю (например, при прокрутке страницы до него). Рекомендуется оставлять опцию включенной для большинства случаев, чтобы анимация не проигрывалась "вхолостую" за пределами видимой области. Если опцию отключить, анимация начнется сразу после загрузки страницы (или указанной задержки перед стартом).

   • Повторять анимацию (циклично): Если опция включена, анимация счетчика будет работать бесконечно — достигнув конечного значения, он автоматически сбросится на начальное и снова начнет считать. Между циклами будет короткая пауза. Это полезно для демонстрационных целей или привлечения внимания к какому-то показателю. В большинстве случаев для отображения статистики эту опцию не включают.

   • Эффект "Одометра" (прокрутка цифр): Включает продвинутый режим анимации, имитирующий механический одометр, где каждая цифра визуально "перелистывается" до своего нового значения. Эффект особенно заметен на больших числах.

     Эффект Одометра

6. Нажмите кнопку “Сгенерировать код”. Код будет автоматически скопирован в буфер обмена, и вы увидите уведомление.

Шаг 3: Вставьте код на сайт

1. Перейдите в Taptop и откройте настройки страницы: на вкладке Страницы нажмите иконку шестеренки рядом с названием нужной страницы.
   

   

2. В блоке "Перед тегом <body>" вставьте сгенерированный код.

   

3. Сохраните изменения на странице и опубликуйте ее (Ctrl+Shift+S).