Прелоадер «Жалюзи» в Tilda: последовательное раскрытие полос

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

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

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

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

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

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

Настройте движение одной ламели и задержку между соседними. Чем больше полос, тем сильнее заметна общая задержка: последняя начинает движение позже первой.

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

Время счётчика и пауза перед открытием задаются отдельно от движения полос. Число можно отключить, но заданная длительность ожидания продолжит использоваться.

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

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

Разместите код в T123 в начале страницы и опубликуйте. Создавать отдельные полосы в Zero Block или вторую копию для телефона не нужно. Откройте сайт заново и дождитесь последней ламели. После её ухода проверьте первую кнопку и обычный скролл. Один корректно настроенный сценарий должен полностью передать управление странице.

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

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

Если хочется похожего вступления с другой геометрией, сравните его со «Шторами-панелями». Для этих жалюзи ключевое решение — именно ритм отдельных полос.

Читайте также: Прелоадер «Шторы» в Tilda: панели, каскад и открытие первого экрана · Прелоадер из квадратов в Tilda: сборка сетки, цвета и выход.