Интерактивная точечная сетка для Zero Block: точки в зоне курсора тянутся к нему, увеличиваются и подсвечиваются.
Когда такой фон уместен
Подойдёт для продуктовой обложки, портфолио разработчика или страницы лаборатории. Небольшие точки оставляют достаточно спокойного пространства для текста, а локальная реакция помогает сделать экран живым.
Достоинство сетки — локальность: заметное изменение происходит рядом с указателем, а остальной экран остаётся спокойным. Не делайте точки настолько крупными, чтобы они спорили с буквами заголовка.
Что происходит под курсором
Точки расположены на регулярной сетке. Внутри радиуса указателя рассчитывается смещение, размер и прозрачность каждой точки. Когда указатель уходит, координаты снова вычисляются от исходной сетки — эффект не оставляет деформированных участков.
Как установить эффект в Zero Block
- Подготовьте Zero BlockСоздайте блок с текстом и кнопками. Проверьте его высоту на всех адаптивных разрешениях. Фон должен оставаться декоративным, а текст — читаемым.
- Добавьте HTML-элементВставьте элемент HTML и расположите его за остальным содержимым блока. Не добавляйте второй экземпляр эффекта в тот же HTML-элемент.
- Настройте размерыДля HTML-элемента выберите Window Container, задайте ширину и высоту 100%, расположите по центру по обеим осям. Проверьте размеры на мобильных разрешениях.
- Вставьте код модификацииВставьте целиком подготовленный HTML, CSS и JavaScript в HTML-элемент. В блоке настроек замените цвета и нужные параметры. Не вставляйте этот пакет в head: там нет контейнера фона.
- Опубликуйте страницуСохраните изменения и откройте опубликованную страницу. Работа JavaScript в редакторе не равнозначна работе на опубликованном сайте.
- Проверьте взаимодействиеНа компьютере двигайте курсор по блоку. На телефоне коснитесь блока и проверьте прокрутку. Нажмите все кнопки и ссылки поверх фона: декоративная анимация не должна мешать их работе.
Как настроить внешний вид
Начните с radius 170 px и density 1. Если экран маленький, уменьшите радиус. intensity отвечает за размер активных точек и их смещение, color задаёт общий акцент.
| Параметр | Значение | Что меняет |
|---|---|---|
color | HEX, например #29d39b | color задаёт цвет точек. В центре воздействия они ярче; вдали от курсора остаются полупрозрачными. |
background | HEX, например #0a0807 | Цвет подложки блока. |
speed | 0.1–3 | Скорость самостоятельного движения. 1 — исходный темп. |
intensity | 0.2–2 | Размер активных точек и сила их притяжения. |
radius | 50–350 px | Область реакции на курсор, внутри выбранного блока. |
density | 0.4–2 | Плотность элементов. Больше элементов — выше нагрузка. |
Что проверить после публикации
Высокая density уменьшает расстояние между точками. На большом блоке это увеличивает количество операций, поэтому повышайте плотность постепенно и проверяйте мобильный экран.
Без мыши по сетке проходит мягкий движущийся акцент. На телефоне касание задаёт центр притяжения. Сетка не перехватывает прокрутку страницы. Проверьте чтение текста, клики по кнопкам и вертикальную прокрутку. Затем смените ориентацию телефона: фон должен принять размеры контейнера.
Как сохранить скорость страницы
Не устанавливайте много анимированных фонов рядом. Начните с исходной плотности, а на длинной странице используйте эффект только в ключевых блоках. Здесь анимация приостанавливается вне экрана и при скрытой вкладке, но фактическая нагрузка также зависит от размеров блока и устройства.
Где посмотреть и настроить пример
На странице модификации есть работающий пример, управление цветами и скоростью, подробная установка. Стоимость готового пакета — 500 ₽. Приём платежей пока не подключён.
Открыть Магнитная сеткаСправка: официальная документация Tilda по HTML.