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