Буквенное табло в Tilda: прелоадер в стиле аэропорта и вокзала

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также: Прелоадер с дешифровкой текста в Tilda: название из случайных символов · Прорисовка слова в Tilda: текстовый прелоадер с контуром и заливкой.