Прелоадер с заполняющей экран волной для Tilda
Цветная волна поднимается снизу вверх, после чего заставка плавно исчезает.Подробнее о модеСвернуть описание
Прелоадер с заполняющей экран волной для Tilda
Цветная волна поднимается снизу вверх, после чего заставка плавно исчезает.Что умеет мод
- Заполняет экран цветом с движущейся волной по верхнему краю.
- Раздельно задаёт время заполнения, скорость и высоту волны.
- Предлагает плавное, ускоряющееся или линейное заполнение.
- Добавляет название бренда и необязательный счётчик заполнения.
Как подключить
Подберите цвета
Задайте фон и цвет воды. При необходимости включите бренд и оформите его отдельно: текст, шрифт, регистр, размер и цвет. Проверьте читаемость названия до подъёма волны и после заполнения.
Настройте движение
Выберите время заполнения, длительность цикла волны и её высоту. Подберите плавность подъёма: равномерную, с разгоном или плавным началом и окончанием. Движение края и подъём уровня настраиваются отдельно.
Оформите счётчик
При необходимости включите проценты, добавьте префикс и настройте шрифт, размер, цвет и прозрачность. Укажите максимальное ожидание и длительность исчезновения. Решите, нужно ли удерживать анимации Tilda до конца заставки.
Проверьте публикацию
Вставьте код в T123 в начале страницы и опубликуйте. Проверьте волну, контраст текста и появление сайта на компьютере и телефоне. Отдельная библиотека GSAP или видеоролик для этого эффекта не требуются.
Что учитывать. Счётчик следует уровню заполнения экрана. Он не измеряет реальный объём загруженных файлов и не ускоряет открытие сайта. В обычном режиме выход учитывает завершение заполнения и готовность страницы. Используйте одну заставку и не задавайте длительный подъём без необходимости.
Вопросы и ограничения
Можно ускорить волну, не ускоряя заполнение?
Да. Длительность волнового цикла и время подъёма уровня — отдельные параметры. Меняйте их независимо.
Можно оставить только воду без текста?
Да. Бренд и счётчик включаются отдельно. Отключите оба элемента, если нужна только цветная заставка.
Чем отличается от «Жидкого текста»?
Здесь волна заполняет весь экран. «Жидкий текст» заполняет цветом контуры букв названия.
Почему экран сразу заполнен цветом?
При системном уменьшении движения код сразу показывает заполненное состояние и использует сокращённый выход вместо полного подъёма волны.
Доступ к конструктору
Это бесплатная модификация. Войдите в аккаунт, чтобы настроить её и получить код.
