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