Прелоадер «Волна» в Tilda: заполнение экрана водой и плавный выход

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

Движение волны и подъём уровня — разные настройки. Разберём их отдельно, чтобы не ускорять всё вступление, когда хочется поменять только характер края. Отдельная видеозапись или библиотека GSAP этому эффекту не требуются.

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

Одна удачная картинка не гарантирует читаемость всей анимации: цветной край проходит через надпись и меняет фон под ней. Подберите сочетание, при котором название не исчезает на этом переходе. Сравните палитру с первым экраном сайта. Иногда достаточно одного фирменного цвета вместо попытки буквально изобразить воду синим оттенком, который не связан с остальным оформлением.

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

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

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

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

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

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

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

Добавьте готовый код в T123 в начале страницы и опубликуйте её. Используйте один прелоадер. После установки откройте страницу заново: волна должна завершиться, затем сайт — стать доступным для чтения, нажатий и прокрутки. Длинный подъём не исправляет тяжёлые изображения и не ускоряет загрузку, поэтому не растягивайте его только ради ощущения занятости.

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

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

Если нужен похожий эффект внутри букв, выбирайте «Жидкий текст»: здесь волна заполняет весь экран, а не контур названия.

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