Прелоадер с вариативным шрифтом для Tilda
Название меняет насыщенность и ширину букв, пока нижняя полоска движется к завершению.Подробнее о модеСвернуть описание
Прелоадер с вариативным шрифтом для Tilda
Название меняет насыщенность и ширину букв, пока нижняя полоска движется к завершению.Что умеет мод
- Анимирует оси насыщенности и ширины у поддерживающего их шрифта.
- Настраивает начальные и конечные значения wght и wdth.
- Оформляет название, нижнюю подпись и линию прогресса отдельно.
- Завершает сцену небольшим увеличением, размытием и исчезновением слова.
Как подключить
Подключите шрифт
Выберите вариативный шрифт с нужными осями и подключите его к сайту. Укажите точное имя семейства. Поле URL в конструкторе загружает шрифт только для превью и не добавляет его в опубликованный код.
Настройте название
Введите короткое слово, задайте размер, регистр и цвет. Выберите начальную и конечную насыщенность и ширину в пределах возможностей шрифта. Проверьте крайние состояния: широкие буквы должны помещаться на телефоне.
Оформите дополнительные элементы
При необходимости включите подпись снизу слева и настройте её текст, шрифт, размер, цвет и прозрачность. Включите линию прогресса, задайте её высоту, акцентный цвет и прозрачность дорожки.
Опубликуйте и сравните
Задайте длительность сцены, максимальное ожидание и удержание анимаций Tilda. Вставьте код в T123 в начале страницы. После публикации сравните шрифт с превью, проверьте движение букв и восстановление прокрутки.
Что учитывать. Обычный статический шрифт не получает новые оси от этого мода. Если у файла нет wght или wdth, соответствующее изменение может быть незаметно. Линия отражает время сценария, а не точную загрузку ресурсов. Обычный выход учитывает завершение анимации и готовность страницы. Используйте один прелоадер.
Вопросы и ограничения
Почему шрифт работает в превью, но другой на сайте?
URL шрифта предназначен только для превью. Подключите тот же файл на сайте и проверьте совпадение имени семейства.
Почему толщина меняется, а ширина нет?
Проверьте, поддерживает ли выбранный файл ось wdth. Наличие изменяемой насыщенности не означает, что у шрифта обязательно есть изменяемая ширина.
Можно убрать линию и подпись?
Да. У них отдельные переключатели. В сцене можно оставить только название с изменением параметров букв.
Что происходит при уменьшении движения?
Код выставляет конечные значения осей и заполненную линию, если она включена, затем использует упрощённое исчезновение.
Доступ к конструктору
Мод доступен по подписке Pro. Войдите в аккаунт, чтобы настроить его и получить код. Действующие условия указаны в тарифах.
