Фон с жидким градиентом

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

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

Главная

Коллекция

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

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

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

74890716

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

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

jQuery

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

Добавляем html-элемент
Задаем ему позиционирование CONTAINER: WINDOW (X: LEFT, Y: TOP)
Задаем размеры ширины и высоты по 100%
Копируем в него код

1 шаг

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

2 шаг

Ориентируясь по комментариям в коде, вы можете изменить:

data-hue — Цвет в формате HUE (значение от 0 до 360 меняет цвет)
data-noise — Шум (значение от 0 до 1 меняет интенсивность)
data-scanline — Размер линий шума (значение от 0 до 1 меняет размер)
data-speed — Скорость (значение от 0 до 1 меняет скорость)
data-scan-freq — Частота шума (значение от 0 до 1 меняет скорость)
data-warp — Частота изгибов (значение от 1 до 10 меняет скорость)

Настраиваем параметры в коде

3 шаг

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

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

<!--TS19 - Модификация для Тильды. Фон с жидким градиентом https://mod.tistols.com/liquid-gradient -->
<style>
    .liquid-gradient {  position: relative; width: 100%; height: 100%; overflow: hidden;}
    canvas { display: block;}
    .wrapper { width: 100%; height: 100%;}
</style>
    <div class="wrapper">
        <!-- data-hue - Цвет в формате HUE (значение от 0 до 360 меняет цвет) -->
        <!-- data-noise - Шум (значение от 0 до 1 меняет интенсивность) -->
        <!-- data-scanline - Размер линий шума (значение от 0 до 1 меняет размер) -->
        <!-- data-speed - Скорость (значение от 0 до 1 меняет скорость) -->
        <!-- data-scan-freq - Частота шума (значение от 0 до 1 меняет скорость) -->
        <!-- data-warp - Частота изгибов (значение от 1 до 10 меняет скорость) -->
        <div class="liquid-gradient"
            data-hue="0"
            data-noise="0"
            data-scanline="0"
            data-speed="0.3"
            data-scan-freq="0"
            data-warp="0"
            data-resolution-scale="1"
        ></div>
    </div>

<!--TS19 - Модификация для Тильды. Фон с жидким градиентом https://mod.tistols.com/liquid-gradient -->
<script type="module" crossorigin src="https://mods.tistols.com/mods/liquid-gradient/liquid-gradient-UH32uyg.js"></script>

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