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