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