Световые ленты
Несколько светящихся лент текут через блок и меняют изгиб вслед за движением мыши.
Новый характер.
Двигайте курсор или коснитесь фона
Как работает световые ленты
Каждая лента сочетает широкое мягкое свечение и тонкую световую линию. Волны движутся самостоятельно; вертикальное положение курсора меняет общий изгиб в центральной части блока.
Лендинг цифрового сервиса, музыкального проекта или студии. Ленты выразительно работают за крупным заголовком при умеренной интенсивности.
На телефоне и слабом устройстве
Касание меняет центр реакции, вертикальная прокрутка сохраняется. Без курсора фон движется самостоятельно. Анимация приостанавливается вне экрана и в скрытой вкладке. При уменьшенном движении в системе показывается статичный вариант.
Подберите эффект под свой дизайн
| Параметр | Значение | Что меняет |
|---|---|---|
color | HEX | Цвет эффекта. |
background | HEX | Цвет фона. |
speed | 0.1–3 | Скорость самостоятельного движения. |
density | 0.4–2 | Плотность деталей фона. |
radius | 50–350 px | Область реакции; для лент и тоннеля параметр сохраняется, но не используется. |
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-элемента; реакция на курсор считывается с его артборда Zero Block.
Можно поставить фон в несколько блоков?
Да. Добавьте отдельный HTML-элемент в каждый блок и вставьте сгенерированный код. У каждого экземпляра будут свои размеры и параметры.
Почему фон не виден?
Проверьте высоту HTML-элемента, опубликованную страницу и порядок слоёв. Основная реакция — на вертикальное движение курсора. Это намеренное поведение: ленты не прыгают к каждому горизонтальному положению мыши.
Как настроить цвета и движение?
Плотность меняет число лент, интенсивность — амплитуду волн, скорость — темп движения. Цвет и фон позволяют согласовать эффект с вашим дизайном. После покупки параметры выбираются в личном кабинете. Генератор выдаёт полный код для вставки.
Подробнее в блоге
Несколько светящихся лент текут через блок и меняют изгиб вслед за движением мыши. Установка в Zero Block и настройка параметров.
Читать статью