Прелоадер со счётчиком в Tilda: цифры и уходящая штора

Короткая заставка может стать частью подачи портфолио или презентации продукта: появляются цифры, затем штора открывает первый экран. Здесь важнее всего чувство времени. Если заставка слишком длинная, посетитель просто ждёт, хотя уже хотел читать сайт.

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

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

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

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

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

Время отсчёта и время выхода настраиваются отдельно. Можно увести штору вверх, вниз или в сторону либо выбрать затухание без смещения. Оцените переход вместе с первым экраном: направление должно поддерживать композицию, а не создавать случайный рывок.

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

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

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

1. Настройте цифры, фон и дополнительные элементы.
2. Задайте отсчёт, максимальное ожидание и способ выхода.
3. Если нужно, настройте задержку анимаций Tilda.
4. Разместите полученный код в T123 в начале страницы.
5. Опубликуйте страницу и откройте её по публичному адресу.

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

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

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

Читайте также: Lottie-анимация в Tilda: как добавить в Zero Block и настроить запуск · Появление элементов при скролле в Tilda: как настроить по очереди.