Прелоадер «Жидкий текст» в Tilda: заполнение букв градиентом

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

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

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

При размере 0 используется автоматический размер, но его всё равно нужно проверить на телефоне. Длинная фраза может выглядеть хорошо на мониторе и не помещаться в узкую область. Здесь используется обычный текст: поле не загружает произвольный SVG-логотип. Если нужен конкретный фирменный знак сложной формы, не ожидайте, что ввод названия автоматически воспроизведёт его рисунок.

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

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

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

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

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

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

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

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

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

• Контур читается до заливки.
• Всё слово помещается на узком экране.
• Цвета не исчезают на фоне.
• Проценты стоят отдельно и не закрывают название.
• После выхода доступны кнопки и прокрутка.
• Упрощённый режим также открывает содержимое.

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

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