Живой туман для Tilda на WebGL: многослойный шум создаёт плавные завихрения, а движение курсора изменяет течение и локальное свечение.
Когда такой фон уместен
Подойдёт для обложки музыкального проекта, творческого портфолио или атмосферной презентации. Короткий светлый заголовок читается лучше, чем длинный текст поверх постоянно меняющегося тумана.
Для тумана важнее спокойная композиция, чем количество декоративных деталей. Разместите акцент в одном блоке, а соседние разделы оставьте статичными: так переход к контенту будет понятнее.
Что происходит под курсором
Фрагментный шейдер рассчитывает несколько слоёв шума и искажает их координаты. Положение курсора влияет на смещение внутри поля, поэтому фон не просто перемещается как картинка. Палитра задаётся отдельными цветами подложки и световых переходов.
Как установить эффект в Zero Block
- Подготовьте Zero BlockСоздайте блок с текстом и кнопками. Проверьте его высоту на всех адаптивных разрешениях. Фон должен оставаться декоративным, а текст — читаемым.
- Добавьте HTML-элементВставьте элемент HTML и расположите его за остальным содержимым блока. Не добавляйте второй экземпляр эффекта в тот же HTML-элемент.
- Настройте размерыДля HTML-элемента выберите Window Container, задайте ширину и высоту 100%, расположите по центру по обеим осям. Проверьте размеры на мобильных разрешениях.
- Вставьте код модификацииВставьте целиком подготовленный HTML, CSS и JavaScript в HTML-элемент. В блоке настроек замените цвета и нужные параметры. Не вставляйте этот пакет в head: там нет контейнера фона.
- Опубликуйте страницуСохраните изменения и откройте опубликованную страницу. Работа JavaScript в редакторе не равнозначна работе на опубликованном сайте.
- Проверьте взаимодействиеНа компьютере двигайте курсор по блоку. На телефоне коснитесь блока и проверьте прокрутку. Нажмите все кнопки и ссылки поверх фона: декоративная анимация не должна мешать их работе.
Как настроить внешний вид
Поставьте background темнее остальных цветов и не повышайте все оттенки до белого. speed отвечает за течение, intensity — за реакцию на курсор. Если движения слишком много, сначала снизьте скорость, затем силу воздействия.
| Параметр | Значение | Что меняет |
|---|---|---|
color | HEX, например #129e72 | background задаёт самый тёмный тон. colors[0], colors[1] и colors[3] задают цветовые переходы шейдера; colors[2] используется в упрощённом фоне. |
background | HEX, например #081f16 | Цвет подложки блока. |
speed | 0.1–3 | Скорость самостоятельного движения. 1 — исходный темп. |
intensity | 0.2–2 | Сила смещения поля под курсором. |
colors | Массив из 4 HEX-цветов | Палитра свечения. В примере первый цвет меняется полем «Цвет эффекта». |
Что проверить после публикации
WebGL может быть отключён настройками браузера или устройства. В этом случае показывается упрощённая версия, а не точная имитация тумана. Проверьте исходный эффект и запасной вариант на нужных устройствах.
На телефоне туман продолжает плавно двигаться; касание влияет на область завихрения. Если WebGL недоступен, включается упрощённый фон из цветовых облаков, а в примере отображается пояснение. Проверьте чтение текста, клики по кнопкам и вертикальную прокрутку. Затем смените ориентацию телефона: фон должен принять размеры контейнера.
Как сохранить скорость страницы
Не устанавливайте много анимированных фонов рядом. Начните с исходной плотности, а на длинной странице используйте эффект только в ключевых блоках. Здесь анимация приостанавливается вне экрана и при скрытой вкладке, но фактическая нагрузка также зависит от размеров блока и устройства.
Где посмотреть и настроить пример
На странице модификации есть работающий пример, управление цветами и скоростью, подробная установка. Стоимость готового пакета — 500 ₽. Приём платежей пока не подключён.
Открыть Интерактивный туманСправка: официальная документация Tilda по HTML.