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

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

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

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

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

Маркер {brand} подставляет название проекта, чтобы не повторять его вручную в каждом месте. Символ | отделяет правую часть, которая будет показана акцентным цветом.

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

Настройте фон страницы, терминала и его заголовка, цвета текста и акцента. Затем выберите максимальную ширину, скругление и внутренние отступы.

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

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

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

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

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

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

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

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