Прелоадер-одометр в Tilda: прокрутка цифр до 100 и плавный выход

Каждый разряд счётчика прокручивается в своём вертикальном барабане. Число доходит до 100, ненадолго задерживается и исчезает вместе с заставкой. Такой вариант строит вступление вокруг простой числовой анимации.

Это не счётчик продаж, посещений или данных из внешнего сервиса. Проценты следуют времени сценария. Разберём оформление трёх разрядов и ритм, который позволит увидеть финал, не растягивая ожидание.

Выберите фон, цвет и шрифт. Настройте размер относительно ширины экрана, минимальный размер и расстояние между цифрами. Проверьте, помещаются ли все три разряда на самом узком телефоне.

Слишком большой минимум может мешать счётчику уменьшаться вместе с экраном. Слишком тесные интервалы сливают разряды в одно пятно во время движения. Сравните начало и итоговые 100. Для такой заставки важна не только крупная цифра в центре монитора, но и целое аккуратное число на маленьком экране.

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

Просмотрите прокрутку несколько раз. Декоративное начертание может красиво выглядеть на финале, но создавать шум во время смены символов. Не пытайтесь рассмотреть каждое промежуточное число: важнее, чтобы движение оставалось понятным и завершалось читаемыми 100. Если счётчик тяжело воспринимается, начните с более спокойного шрифта и умеренного расстояния между разрядами.

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

Название суффикса не меняет назначение самого мода. Если написать рядом «заказов», он не начнёт получать реальные данные магазина: сценарий всё равно завершается на 100. Для загрузочной заставки оставьте понятную подпись, которая не выдаёт декоративное число за статистику сайта или точное количество скачанных файлов.

Дополнительная подпись включается отдельно. Введите текст, выберите цвет, шрифт и размер. Убедитесь, что её можно прочитать за время показа, особенно на телефоне.

Длительность отсчёта, пауза после достижения 100 и затухание задаются независимо. Если хочется сократить вступление, проверьте паузу, а не только скорость барабанов. Финальное число должно успевать стать понятным. Слишком быстрая прокрутка с долгой неподвижной задержкой часто выглядит менее естественно, чем ровный короткий сценарий.

Укажите максимальное ожидание. В обычном режиме выход учитывает завершение отсчёта и готовность страницы. Если первый экран использует анимации Tilda, проверьте их удержание до конца заставки.

Вставьте код в T123 в начале страницы и опубликуйте. Изображения цифр и отдельные элементы Zero Block не нужны. Заново откройте адрес, дождитесь финала и проверьте первую кнопку. После затухания страница должна прокручиваться, а цифры — полностью исчезнуть вместе с перекрывающим фоном.

При системном уменьшении движения код сразу показывает конечное состояние и сокращает переход. Поэтому мгновенные 100 в этом режиме предусмотрены.

• Три разряда помещаются на телефоне.
• Цифры различимы во время движения и на финале.
• Суффикс не выглядит частью неверной статистики.
• Пауза не затягивает открытие страницы.
• После выхода доступны кнопки и прокрутка.

Проверяйте обычный режим отдельно: сокращённый переход сам по себе не подтверждает качество вертикальной прокрутки барабанов.

Читайте также: Кольцевой прелоадер в Tilda: размер, заполнение и вращение · Прелоадер с монограммой в Tilda: прорисовка буквы и рамки.