Прелоадер «Затвор камеры» в Tilda: раскрытие лепестков перед страницей

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

В конструкторе можно оставить только раскрытие или дополнить его названием, процентами и декоративной строкой f-stop. Разберём оформление и время по отдельности. Мод не обращается к камере посетителя: вся сцена создаётся кодом, а обозначение диафрагмы служит частью дизайна.

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

Для фотографического портфолио сравните заставку с настоящим первым снимком. Яркий фон может выглядеть удачно сам по себе, но отвлекать от спокойной фотографии за лепестками. Не нужно дополнительно загружать изображение камеры или вручную собирать её детали в Zero Block. Геометрию перехода создаёт готовый код.

Название бренда, проценты и строка f-stop включаются отдельно. Можно оставить только эффект раскрытия или добавить короткое название. Подберите шрифт, размеры и цвета каждого видимого элемента.

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

Строка f-stop отсылает к обозначению диафрагмы в фотографии. Она помогает поддержать образ камеры, но не сообщает параметры устройства посетителя и не меняет их.

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

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

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

Разместите сгенерированный код в T123 в начале страницы и опубликуйте её. Отдельный файл анимации не нужен. На одной странице используйте одну заставку.

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

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

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

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

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