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

Для узнаваемого вступления не всегда нужна сложная сцена. Иногда достаточно первой буквы названия в тонкой рамке: контур прорисовывается, буква заполняется цветом, и открывается страница.

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

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

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

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

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

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

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

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

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

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

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

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

• Используется ожидаемый первый символ названия.
• Буква и подпись отображаются нужным шрифтом.
• Композиция помещается в выбранную рамку на телефоне.
• Заставка полностью уходит и открывает доступ к странице.
• Уменьшение движения не оставляет посетителя за неподвижным экраном.

Проверяйте весь путь до основного содержимого, а не только первый красивый кадр.

Читайте также: Прелоадер со счётчиком в Tilda: цифры и уходящая штора · Lottie-анимация в Tilda: как добавить в Zero Block и настроить запуск.