Прелоадер «Шторы» в Tilda: панели, каскад и открытие первого экрана

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

Конструктор собирает панели кодом — рисовать их вручную в Zero Block не требуется. Разберём направление, цвета и время каскада. Длительность одной панели и время всего выхода здесь не равны.

Укажите число панелей и сторону выхода: вверх, вниз, влево или вправо. Для вертикального движения полосы стоят рядом, а для горизонтального располагаются друг под другом.

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

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

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

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

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

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

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

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

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

При системном уменьшении движения вместо полного каскада используется плавное исчезновение. Это ожидаемое поведение для такой настройки устройства.

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

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

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