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