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