Бегущие строки перед загрузкой Tilda: текстовый прелоадер и выход лент

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

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

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

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

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

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

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

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

Время одного цикла отвечает за скорость движения строк: увеличение длительности делает прокрутку медленнее. Длительность счётчика настраивается отдельно и не задаёт скорость текста.

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

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

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

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

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

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