Прорисовка слова в Tilda: текстовый прелоадер с контуром и заливкой

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

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

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

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

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

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

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

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

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

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

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

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

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

• Шрифт подключён и содержит все нужные буквы.
• Контур не теряет мелкие детали.
• Полное слово помещается на телефоне.
• Подпись можно прочитать до выхода.
• После заставки работают кнопки и прокрутка.

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

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