Время настройки: 1 минута

Анимация чисел с увеличением/уменьшением

Добавляет эффект увеличения/уменьшения чисел в Zero-блоках

Инструкция по установке

Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта

Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.

<script src="https://cdn.postnikovmd.com/tilda@1.5/mods.min.js"></script>

Задайте тексту, для которого хотите применить эффект, класс .uc-numbers

Если вы планируете использовать несколько элементов с таким эффектом, задайте им разные классы, например, .uc-numbers1 и .uc-numbers2
Задайте в настройках модификации параметры анимации чисел
Скопируйте код и вставьте его в блок T123 в конец страницы

Как это сделано?

<script>numbers.init(".uc-numbers", { transition: 1000, start: 1 })</script>

Открыть пример

Настройки модификации

Класс текстового блока:

Скорость и тип анимации:

Конечное значение:

Начальное значение:

Оставьте пустым, если хотите, чтобы конечным значением осталось текущее число в блоке

По начальному значению определяется, в какую сторону будет работать анимация (увеличение/уменьшение).

Если начальное значение меньше конечного, то анимация будет увеличивать число, если больше, то наоборот.

+ Настройки анимации

Разделитель между тысячами

Настройки форматирования

Символ, который будет использоваться как разделитель между тысячами. По умолчанию — пробел.

<!--numbers.js Анимация чисел с увеличением/уменьшением. https://postnikovmd.com/mods/numbers-->
<script>numbers.init(".uc-numbers")</script>

Скопировать код

Особенности

Работает с целыми числами

Модификация поддерживает только целые числа. Например, 100 или 1 000
Поддерживает префиксы

Любые символы до и после числа. Например, «<» или «руб.»
Запускается по триггеру

Если элемент с контейнером находится в видимой зоне экрана