Эффект "Жидкий эфир"

Модификация позволяет добавить эффект жидкого эфира для фона в зеро блоке
Инструкция по настройке
Шаблон страницы
Как добавить шаблон
96628136
Для корректной работы модификаций подключите библиотеку jQuery:
Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
jQuery
1 шаг
Добавляем блок T123 и копируем в него код
Скопировать код
Создаем Zero Block и открываем редактор
  1. Добавляем html-элемент
  2. Задаем ему позиционирование CONTAINER: WINDOW (X: LEFT, Y: TOP)
  3. Задаем размеры ширины и высоты по 100%
  4. Копируем код в html-элемент
2 шаг
Скопировать код
3 шаг
В коде html-элемента есть комментарий для каждого параметра, можете настроить необходимые значения.
Настраиваем параметры эффекта
<!--TS31 - Модификация для Тильды. Эффект "Жидкий эфир" https://mod.tistols.com/liquid-ether--><script type="module" crossorigin src="https://mods.tistols.com/mods/liquid-ether/liquid-ether-23iruyhkj.js"></script>
<!--TS31 - Модификация для Тильды. Эффект "Жидкий эфир" https://mod.tistols.com/liquid-ether-->
<!-- 
colors: Цветовые точки градиента. (Набор HEX-цветов, из которых строится палитра скорости-жидкости)
mouse-force: Сила воздействия курсора. (Множитель, определяющий насколько мощно движение мыши/касания добавляет скорость в симуляцию)
cursor-size: Размер курсора-кисти. (Радиус в пикселях, которым вносится сила в жидкость; больше = шире зона влияния)
resolution: Масштаб симуляции относительно размера канваса. (0.5 = половина разрешения; ниже = быстрее, но более размыто)
dt: Фиксированный шаг симуляции. (Влияет на стабильность и скорость течения; меньше = более точное и плавное поведение)
bfecc: Режим BFECC-адвекции. (true — более чёткие и устойчивые потоки; false — чуть выше производительность, ниже точность)
is-viscous: Включение режима вязкости. (true — более густое, плавное движение; false — стандартная жидкость)
viscous: Коэффициент вязкости. (Используется только когда is-viscous=true; больше = гуще и медленнее течение)
iterations-viscous: Количество итераций Гаусса–Зейделя для расчёта вязкости. (Больше итераций = более гладкая, но более тяжёлая симуляция)
iterations-poisson: Число итераций решения уравнения Пуассона. (Определяет степень устранения «сжимаемости» потока; выше = чище движение)
is-bounce: Отскок от границ. (true — скорость гасится на краях, создавая «удар» по стенкам; false — свободный поток)
auto-demo: Автоматический режим движения. (true — курсор двигается сам при отсутствии взаимодействия)
auto-speed: Скорость авто-движения курсора. (Нормализованные единицы в секунду)
auto-intensity: Сила потока в авто-режиме. (Множитель скорости, добавляемой авто-курсорным движением)
takeover-duration: Время перехода от авто-курса к реальной мыши. (Секунды плавной интерполяции)
auto-resume-delay: Задержка перед возобновлением авто-режима. (Миллисекунды бездействия пользователя)
auto-ramp-duration: Время «разгона» авто-движения. (За сколько секунд авто-режим выходит на максимальную скорость)
-->
<div 
  class="liquid-ether-container"
  style="width: 100%; height: 100%; position: relative;"
  data-colors="#5227FF,#FF9FFC,#B19EEF"
  data-mouse-force="20"
  data-cursor-size="100"
  data-resolution="0.5"
  data-dt="0.014"
  data-bfecc="true"
  data-is-viscous="false"
  data-viscous="30"
  data-iterations-viscous="32"
  data-iterations-poisson="32"
  data-is-bounce="false"
  data-auto-demo="true"
  data-auto-speed="0.5"
  data-auto-intensity="2.2"
  data-takeover-duration="0.25"
  data-auto-resume-delay="1000"
  data-auto-ramp-duration="0.6"
></div>
Вам также может быть интересно: