Заливка слова слева направо в Tilda: прелоадер «Мазок краской»

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

В текущем варианте направление одно: слева направо. Это работа с текстом выбранного шрифта, а не с загруженным SVG-логотипом. Ниже — порядок настройки, который поможет сохранить читаемость слова на всех этапах.

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

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

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

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

На краю заливки можно включить вертикальную светящуюся линию. Она подчёркивает направление прохода, но не обязательна для самого заполнения букв.

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

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

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

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

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

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

• Контур читается ещё до заливки.
• Всё слово помещается на узком экране.
• Светящаяся граница не мешает чтению.
• После прохода видно цельное название.
• Заставка исчезает и освобождает кнопки и прокрутку.

Для заполнения снизу вверх несколькими цветами подходит «Жидкий текст». Здесь основа другая: горизонтальное закрашивание одним акцентом, без выбора нового направления движения.

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