Круговое раскрытие страницы в Tilda: прелоадер «Диафрагма»

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

У мода есть два разных этапа: индикатор ожидания и само раскрытие. Их удобно настраивать отдельно. Особенно важно проверить углы широкого экрана: красивого отверстия в центре недостаточно, если в конце по краям остаётся перекрытие.

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

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

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

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

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

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

Конечный радиус определяет размер отверстия к концу раскрытия. Подберите его так, чтобы переход корректно открывал страницу и у краёв, и в углах.

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

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

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

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

• Цифры читаются внутри кольца.
• Все углы экрана открываются при выходе.
• Главный объект первого экрана появляется понятно.
• Кнопки и прокрутка доступны после заставки.
• На телефоне нет оставшейся плашки у края.

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

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