Световые волны
Новый фон для Zero Block на основе световых и курсорных эффектов: полупрозрачные волны расходятся от указателя, а центр мягко подсвечивается.
Новый характер.
Двигайте курсор или коснитесь фона
Как работает световые волны
Восемь эллиптических колец увеличиваются и исчезают по циклу. Центр колец плавно догоняет курсор. Под кольцами рисуется радиальное свечение. Этот седьмой эффект разработан как отдельная вариация по мотивам авроры и плавного курсорного следа.
Подойдёт для страницы аудиопродукта, медитативного проекта или минималистичной технологической обложки. Волны создают направленное движение, поэтому оставьте вокруг текста достаточно свободного пространства.
На телефоне и слабом устройстве
Без указателя центр волн движется самостоятельно. На телефоне касание задаёт новую точку, от которой расходятся кольца. Жест прокрутки сохраняется.
Кадры не рисуются, когда блок вне экрана или вкладка скрыта. Количество элементов и разрешение ограничены. При включённом уменьшенном движении показывается статичный фон; касание меняет его положение без непрерывного движения.
Подберите эффект под свой дизайн
Настройки меняют этот пример. Цвета и параметры установки находятся в коде модификации. Настройка уменьшенного движения в системе отключает автоматическую анимацию.
| Параметр | Значение | Что меняет |
|---|---|---|
color | HEX, например #b58aff | color задаёт кольца и центральное свечение. Полупрозрачность колец уменьшается по мере удаления от центра. |
background | HEX, например #090515 | Цвет подложки блока. |
speed | 0.1–3 | Скорость самостоятельного движения. 1 — исходный темп. |
intensity | 0.2–2 | Толщина световых линий. |
Установка на 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-элемента, опубликованную страницу и порядок слоёв. Убедитесь, что другой элемент не перекрывает фон сплошной заливкой. Светлые тонкие кольца могут потеряться на светлой подложке. Сначала настройте контраст background и color, затем выбирайте толщину через intensity.
Можно ли менять цвета?
color задаёт кольца и центральное свечение. Полупрозрачность колец уменьшается по мере удаления от центра. Цвет фона и скорость также настраиваются. Слишком яркий фон может мешать чтению — проверяйте контраст текста.
Подробнее в блоге
Как добавить волны в Zero Block, настроить их скорость и сохранить лёгкость визуального эффекта.
Читать статью