Эффект лазера

Модификация позволяет добавить эффект лазера для фона в зеро блоке
Инструкция по настройке
Шаблон страницы
Как добавить шаблон
96587696
Для корректной работы модификаций подключите библиотеку jQuery:
Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
jQuery
1 шаг
Добавляем блок T123 и копируем в него код
Скопировать код
Создаем Zero Block и открываем редактор
  1. Добавляем html-элемент
  2. Задаем ему позиционирование CONTAINER: WINDOW (X: LEFT, Y: TOP)
  3. Задаем размеры ширины и высоты по 100%
  4. Копируем код в html-элемент
2 шаг
Скопировать код
3 шаг
Внизу кода html-элемента есть комментарий для каждого параметра, можете настроить необходимые значения.

Для добавления второй и следующих галерей на той же странице, необходимо добавить только html-элемент с тем же кодом, но заменить параметр
data-image-container на новый, он же послужит классом для изображений.
Настраиваем параметры лазера
<!--TS29 - Модификация для Тильды. Эффект лазера https://mod.tistols.com/interactive-badge--><script type="module" crossorigin src="https://mods.tistols.com/mods/laser/laser-ugu23ugy.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<!--TS29 - Модификация для Тильды. Эффект лазера https://mod.tistols.com/interactive-badge-->
<!-- wispDensity: Плотность микро-полос (wisps) вдоль луча. (От 0 до 5 меняет количество и частоту полос)
horizontalBeamOffset: Горизонтальное смещение центра луча. (От 0 до 1 меняет позицию по ширине canvas)
verticalBeamOffset: Вертикальное смещение центра луча. (От 0 до 1 меняет позицию по высоте canvas. Отрицательное значение смещает луч вниз)
flowSpeed: Скорость пульсации (модуляции) основного потока луча. (От 0 до 2 меняет скорость анимации "дыхания" луча)
verticalSizing: Фактор вертикального масштабирования следа луча. (Меняет эффективную вертикальную длину луча. Высокое значение = длиннее луч)
horizontalSizing: Фактор горизонтального масштабирования следа луча. (Меняет горизонтальную ширину луча/области свечения)
fogIntensity: Общая интенсивность объемного тумана. (Меняет яркость окружающего тумана)
fogScale: Пространственный масштаб поля тумана (текстура шума). (от 0 до 1 меняет размерность "облаков" тумана)
wispSpeed: Скорость движения микро-полос (wisps) вдоль луча.
wispIntensity: Интенсивность (яркость) микро-полос.
flowStrength: Сила модуляции (амплитуда) пульсации потока. (Меняет контрастность/выраженность пульсации)
decay: Форма затухания луча (насколько быстро спадает яркость от центра).
falloffStart: Начальный радиус затухания, используемый в расчете inverse square blending. (Меняет базовый размер светового пятна)
fogFallSpeed: Скорость вертикального "опускания" или дрейфа поля тумана.
color: Цвет луча (в формате HEX).-->
<div 
  class="laser-flow-container"
  style="width:100%;height:100%;position:relative;"
  data-wisp-density="1"
  data-horizontal-beam-offset="0.1"
  data-vertical-beam-offset="-0.5"
  data-flow-speed="2"
  data-vertical-sizing="10.0"
  data-horizontal-sizing="0.5"
  data-fog-intensity="0.45"
  data-fog-scale="0.3"
  data-wisp-speed="15.0"
  data-wisp-intensity="5.0"
  data-flow-strength="0.25"
  data-decay="1.1"
  data-falloff-start="1.2"
  data-fog-fall-speed="0.6"
  data-color="#FF79C6"
></div>
Вам также может быть интересно: