Карусель карточек с изометрией

Модификация позволяет добавить эффект огня в шейпах, с возможностью настроить цвет, интенсивность и другие параметры
Инструкция по настройке
Шаблон страницы
Как добавить шаблон
125520316
Для корректной работы модификаций подключите библиотеку jQuery:
Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
jQuery
Создаем Zero Block и открываем редактор
  1. Добавляем поверх шейпа html-элемент
  2. Задаем ему такое же позиционирование и размеры, как у шейпа
  3. Копируем в него код
1 шаг
Скопировать код
2 шаг
Ориентируясь по комментариям в коде, вы можете изменить:

  1. data-color: Цвет эффекта в HEX-формате. (Определяет основной оттенок «горения» или свечения) -->
  2. data-blur: Степень размытия эффекта. (Чем больше значение, тем мягче и менее резкие края пламени/свечения)
  3. data-border-radius: Радиус скругления углов (Рекомендуется ставить как в настройках шейпа)
  4. data-opacity: Прозрачность эффекта. (От 0 до 1 — влияет на насыщенность и видимость эффекта поверх фона)
  5. data-branch-intensity: Интенсивность разветвлений эффекта. (Увеличивает детализацию и «ветвистость» структуры огня/шума)
  6. data-vertical-extent: Вертикальное растяжение эффекта. (Контролирует, насколько сильно эффект вытянут по вертикали)
  7. data-horizontal-extent: Горизонтальное растяжение эффекта. (Определяет, насколько эффект вытянут по ширине)
  8. data-speed: Множитель скорости анимации. (Диапазон примерно 0.1–3.0 — влияет на динамику движения эффекта)
  9. data-position-y: Вертикальная позиция центра эффекта. (От 0 до 1, где 0 — верх блока, 1 — низ блока)
  10. data-scale: Масштаб эффекта. (Минимум 0.5 — определяет общий размер и «зум» визуального эффекта)
  11. data-effect-radius: Радиус ядра эффекта. (Определяет размер основной активной области «горения»)
  12. data-effect-boost: Усиление интенсивности эффекта. (Дополнительный множитель яркости/контраста внутри ядра)
  13. data-edge-min: Минимальный порог краёв. (Задаёт нижнюю границу появления эффекта по краям)
  14. data-edge-max: Максимальный порог краёв. (Задаёт верхнюю границу плотности эффекта по краям)
  15. data-falloff-power: Степень затухания эффекта. (Чем выше значение, тем резче спад интенсивности от центра к краям)
  16. data-noise-scale: Масштаб шума. (Контролирует размер и частоту шумовой текстуры внутри эффекта)
  17. data-width-factor: Коэффициент ширины эффекта. (Регулирует горизонтальную плотность и толщину структуры)
  18. data-wave-amount: Амплитуда волнообразного искажения. (Добавляет колебания и динамическую неровность контуру)
Настраиваем параметры в коде
3 шаг
Добавляем блок T123 и копируем в него код
Скопировать код
<!--TS44 - Модификация для Тильды. Эффект огня для шейпов -->
<!-- data-color: Цвет эффекта в HEX-формате. (Определяет основной оттенок «горения» или свечения) -->
<!-- data-blur: Степень размытия эффекта. (Чем больше значение, тем мягче и менее резкие края пламени/свечения) -->
<!-- data-border-radius: Радиус скругления углов (Рекомендуется ставить как в настройках шейпа -->
<!-- data-opacity: Прозрачность эффекта. (От 0 до 1 — влияет на насыщенность и видимость эффекта поверх фона) -->
<!-- data-branch-intensity: Интенсивность разветвлений эффекта. (Увеличивает детализацию и «ветвистость» структуры огня/шума) -->
<!-- data-vertical-extent: Вертикальное растяжение эффекта. (Контролирует, насколько сильно эффект вытянут по вертикали) -->
<!-- data-horizontal-extent: Горизонтальное растяжение эффекта. (Определяет, насколько эффект вытянут по ширине) -->
<!-- data-speed: Множитель скорости анимации. (Диапазон примерно 0.1–3.0 — влияет на динамику движения эффекта) -->
<!-- data-position-y: Вертикальная позиция центра эффекта. (От 0 до 1, где 0 — верх блока, 1 — низ блока) -->
<!-- data-scale: Масштаб эффекта. (Минимум 0.5 — определяет общий размер и «зум» визуального эффекта) -->
<!-- data-effect-radius: Радиус ядра эффекта. (Определяет размер основной активной области «горения») -->
<!-- data-effect-boost: Усиление интенсивности эффекта. (Дополнительный множитель яркости/контраста внутри ядра) -->
<!-- data-edge-min: Минимальный порог краёв. (Задаёт нижнюю границу появления эффекта по краям) -->
<!-- data-edge-max: Максимальный порог краёв. (Задаёт верхнюю границу плотности эффекта по краям) -->
<!-- data-falloff-power: Степень затухания эффекта. (Чем выше значение, тем резче спад интенсивности от центра к краям) -->
<!-- data-noise-scale: Масштаб шума. (Контролирует размер и частоту шумовой текстуры внутри эффекта) -->
<!-- data-width-factor: Коэффициент ширины эффекта. (Регулирует горизонтальную плотность и толщину структуры) -->
<!-- data-wave-amount: Амплитуда волнообразного искажения. (Добавляет колебания и динамическую неровность контуру) -->
<div
  class="burnShader"
  data-color="#5227ff"
  data-blur="15"
  data-border-radius="10"
  data-opacity="0.6"
  data-branch-intensity="1.6"
  data-vertical-extent="2"
  data-horizontal-extent="3.5"
  data-speed="0.2"
  data-position-y="0.05"
  data-scale="3"
  data-effect-radius="0.45"
  data-effect-boost="0.45"
  data-edge-min="0.0"
  data-edge-max="0.45"
  data-falloff-power="2"
  data-noise-scale="5.1"
  data-width-factor="3.5"
  data-wave-amount="1.25"
></div>
<!--TS44 - Модификация для Тильды. Эффект огня для шейпов -->
<script type="module" crossorigin src="https://tilda.tistols.com/mods/burn-shader/burn-shader-jdhn90hvs8.js"></script>
<link rel="stylesheet" href="https://tilda.tistols.com/mods/burn-shader/burn-shader-jdhn90hvs8.css">
Вам также может быть интересно:
дня
час
минут
секунд
-
-
-
-
+ Месяц тарифа Club за 2000₽
Предложение актуально только для пользователей Pro