Прелоадер из кубиков в Tilda: сборка изометрической композиции и взлёт

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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