Как работает фон
Несколько волн задают движение линий. Рядом с курсором появляется локальный подъём рельефа, который плавно перемещается вслед за мышью.
Где использовать
Фон презентации, архитектурного проекта, аналитического продукта или творческого портфолио. Линии подходят для спокойного выразительного первого экрана.
Установка в Zero Block
Создайте Zero Block и добавьте HTML-элемент за текстом и кнопками. Выберите Window Container, ширину и высоту 100%, центрирование по обеим осям. Проверьте размеры на каждом адаптивном разрешении: элемент нулевой высоты не сможет показать фон.
После покупки откройте модификацию в личном кабинете, настройте пример и сгенерируйте полный код. Вставьте его в HTML-элемент целиком, сохраните и опубликуйте страницу. Не вставляйте этот пакет в head или в текстовый элемент: ему нужен собственный контейнер внутри Zero Block.
Настройка внешнего вида
Плотность меняет количество линий, радиус — область изгиба возле курсора, интенсивность — высоту локального рельефа, скорость — темп волн.
Начните с умеренных значений. В первую очередь проверьте читаемость текста, затем увеличивайте плотность или интенсивность. Цветовая подложка не должна спорить с кнопкой основного действия.
Курсор, касание и доступность
Координаты курсора считываются с артборда Zero Block, поэтому фон реагирует и когда над ним расположены текст или кнопки. Декоративный canvas не перехватывает клики. На телефоне касание задаёт положение реакции, а обработчики не блокируют прокрутку.
При включённом уменьшенном движении фон становится статичным. Анимация приостанавливается вне экрана и в скрытой вкладке. Canvas ограничивает разрешение и количество деталей для снижения нагрузки, но несколько больших активных фонов всё равно стоит проверять на реальном телефоне.
Что проверить после публикации
На узком экране проверьте плотность линий и контраст под текстом. Радиус реакции измеряется в CSS-пикселях внутри HTML-элемента.
Проверьте фон по опубликованному адресу. Двигайте мышь над всеми слоями блока, нажмите ссылки и кнопки, прокрутите страницу на телефоне и поверните устройство. После изменения размеров фон должен занять новую область HTML-элемента.
Изменение настроек
Параметры меняются в личном кабинете без ручного редактирования JavaScript. После изменения сгенерируйте код повторно, замените прежнюю копию в HTML-элементе и опубликуйте страницу. Эти настройки не переписывают ваш сайт автоматически.
Живой пример и инструкция
Стоимость модификации — 500 ₽. Полная инструкция с оформленными шагами доступна на странице эффекта.
Открыть живой пример