Градиентный прелоадер в Tilda: мягкие переливы, название и проценты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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