Вариативный шрифт в прелоадере Tilda: изменение толщины и ширины букв

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

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

У выбранного файла должны быть нужные оси: wght отвечает за насыщенность, wdth — за ширину. Наличие одной не означает наличие другой. Шрифт с изменяемой толщиной может совсем не реагировать на настройку ширины.

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

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

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

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

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

Нижняя подпись и линия прогресса включаются отдельно. У подписи свои текст, шрифт, размер, цвет и прозрачность; у линии — высота, акцент и прозрачность дорожки.

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

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

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

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

• На сайте подключён тот же файл, что в превью.
• Нужные оси действительно поддерживаются.
• Самое широкое слово помещается на телефоне.
• Подпись и линия читаются.
• После выхода доступны кнопки и прокрутка.

Если ширина не меняется, вернитесь к поддержке wdth. Задержка или дополнительная копия кода не добавят отсутствующую ось.

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