Гелевые капли в Tilda: прелоадер со слиянием форм и пульсацией

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

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

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

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

Выберите относительный размер композиции и максимальный размер в пикселях. Это помогает согласовать телефон и большой монитор.

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

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

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

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

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

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

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

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

• Капли различимы хотя бы часть времени.
• Орбиты помещаются на телефоне.
• Размытие не превращает всё в сплошное пятно.
• Проценты читаются, если включены.
• После выхода доступны кнопки и прокрутка.

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

Читайте также: Градиентный прелоадер в Tilda: мягкие переливы, название и проценты · WebGL-прелоадер в Tilda: цветовые переливы и переход к странице.