Эффект "Жидкого стекла"

Модификация позволяет добавить эффект с жидким стеклом для шейпа в зеро блоке

Открыть шаблон

Главная

Коллекция

Инструкция по настройке

Шаблон страницы

Как добавить шаблон

100614626

Для корректной работы модификаций подключите библиотеку jQuery:

Настройки сайта -> Еще -> Подключить jQuery на страницах сайта

jQuery

1 шаг

Добавляем блок T123 и копируем в него код

Скопировать код

Создаем Zero Block и открываем редактор

Добавляем шейп
Задаем ему необходимые размеры ширины и высоты
Задаем ему класс

.fluid-glass - если шейп будет зафиксирован, или
.fluid-glass, fluid-glass-draggable - два класса через запятую, если нужно добавить слежение за курсором

2 шаг

3 шаг

В коде есть комментарий для каждого параметра, можете настроить необходимые значения.

Для добавления второй и следующих галерей на той же странице, необходимо добавить только html-элемент с тем же кодом, но заменить параметр
data-image-container на новый, он же послужит классом для изображений.

Настраиваем параметры эффекта

<!--TS35 - Модификация для Тильды. Эффект "Жидкого стекла" https://mod.tistols.com/fluid-glass -->
<script type="module" crossorigin src="https://mods.tistols.com/mods/fluid-glass/fluid-glass-leos3op7to.js"></script>
<link rel="stylesheet" href="https://mods.tistols.com/mods/fluid-glass/fluid-glass-leos3op7to.css">
<style>
  :root {
    --fg-shadow-color: #ffffff;           /* Цвет внутренней тени */
    --fg-shadow-blur: 5px;                 /* Размытие внутренней тени (от 0px до 100px, контролирует мягкость края тени) */
    --fg-shadow-spread: 0px;                /* Расстояние/размах внутренней тени (от 0px до 100px, контролирует толщину светлой рамки) */
    --fg-tint-color-rgba: rgba(255, 255, 255, 0); /* Цвет и прозрачность "тонировки" фона */
    --fg-distortion-blur: 3px;              /* Размытие фона/подложки (от 0px до 20px, контролирует стандартный эффект "матового стекла") */
    --fg-noise-freq: 0.007;                 /* Частота "волн" (от 0.001 до 0.05, контролирует размер и количество волн) */
    --fg-noise-scale: 100;                   /* Сила искажения (от 0 до 200, контролирует амплитуду/интенсивность "жидкого" эффекта) */
  }
 </style>

Вам также может быть интересно: