Фон с интерактивными точками

Модификация позволяет добавить фон с интерактивными точками взаимодействующими с курсором
Инструкция по настройке
Шаблон страницы
Как добавить шаблон
102511776
Для корректной работы модификаций подключите библиотеку jQuery:
Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
jQuery
1 шаг
Добавляем блок T123 и копируем в него код
Скопировать код
Создаем Zero Block и открываем редактор
  1. Добавляем html-элемент
  2. Задаем ему позиционирование CONTAINER: WINDOW (X: LEFT, Y: TOP)
  3. Задаем размеры ширины и высоты по 100%
  4. Копируем код в html-элемент
2 шаг
Скопировать код
3 шаг
В коде html-элемента есть комментарий для каждого параметра, можете настроить необходимые значения.
Настраиваем параметры эффекта
<!--TS38 - Модификация для Тильды. Фон с интерактивными точками https://mod.tistols.com/dot-grid -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/InertiaPlugin.min.js"></script>
<script type="module" crossorigin src="https://mods.tistols.com/mods/dot-grid/dot-grid-uoq98k8eqr.js"></script>
<!--TS38 - Модификация для Тильды. Фон с интерактивными точками https://mod.tistols.com/dot-grid -->
<!-- 
data-dot-size: Размер каждой точки в пикселях. (Определяет диаметр одной точки сетки)
data-gap: Расстояние между точками в пикселях. (Задает отступ между соседними точками по горизонтали и вертикали)
data-base-color: Базовый цвет точек. (Цвет, в котором точки отображаются в обычном состоянии)
data-active-color: Активный цвет точек. (Цвет точек при наведении или взаимодействии)
data-proximity: Радиус реакции вокруг курсора в пикселях. (Определяет область, в пределах которой точки начинают реагировать на движение мыши)
data-speed-trigger: Порог скорости курсора. (Значение скорости, при котором активируется эффект инерции)
data-shock-radius: Радиус ударной волны при клике в пикселях. (Определяет размер области, охваченной эффектом «взрыва» точек)
data-shock-strength: Сила ударной волны. (Интенсивность смещения/деформации точек при клике)
data-max-speed: Максимальная учитываемая скорость курсора. (Ограничивает расчет инерции для стабильности эффекта)
data-resistance: Сопротивление движения точек. (Чем больше значение, тем быстрее затухает инерция)
data-return-duration: Длительность возврата точек в исходное положение в секундах. (Задает время восстановления сетки после инерции)
-->
<section 
  class="dot-grid"
  style="display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; position: relative;"
  data-dot-size="5"
  data-gap="15"
  data-base-color="#271e37"
  data-active-color="#5227ff"
  data-proximity="120"
  data-speed-trigger="100"
  data-shock-radius="250"
  data-shock-strength="5"
  data-max-speed="5000"
  data-resistance="750"
  data-return-duration="1.5"
></section>
Вам также может быть интересно:
дня
час
минут
секунд
-
-
-
-
+ Месяц тарифа Club за 2000₽
Предложение актуально только для пользователей Pro