🔥 Новая модификация: Система скролл-эффектов!
Эффект размытия фона
Модификация добавляет эффект размытия фона стандартному блоку, zero block или отдельному элементу внутри него. Также эффект можно задать любому объекту на странице через кастомный селектор.
Как размыть фон
- Выбери область применения эффектаРазмыть фон можно у стандартного блока и zero block, элемента в zero block или задать кастомный селектор, если хочешь применить к любому элементу на сайте.
- Задай класс блока или элемента, например: .yu-008-blurУкажи блоку свой css-класс, инструкция как добавить. Либо укажи элементу свой css-класс, инструкция как добавить. Вписывай класс в генераторе с точкой в начале.
- Настрой цвет фона, величину размытия и насыщенности фонаОбязательно указывай цвет фона в rgba с прозрачностью меньше 100%.
- Установи код на сайт, например, в блок T123Скопируй готовый код и вставь его на сайт, памятка по вставке кода.
<%
const selectorBlock = it.SELECTORBLOCK?.split(',').map(item => item.trim()).filter(Boolean).join(',') || '';
const selectorBlockIs = selectorBlock.includes(',') ? `:is(${selectorBlock})` : selectorBlock;
const selectorZeroBlock = it.SELECTORZEROBLOCK?.split(',').map(item => item.trim()).filter(Boolean).join(',') || '';
const selectorZeroBlockIs = selectorZeroBlock.includes(',') ? `:is(${selectorZeroBlock}) .t396__artboard` : `${selectorZeroBlock} .t396__artboard`;
const selectorElement = it.SELECTORELEMENT?.split(',').map(item => item.trim()).filter(Boolean).join(',') || '';
const selectorElementIs = selectorElement.includes(',') ? `:is(${selectorElement}) .tn-atom` : `${selectorElement} .tn-atom`;
const selectorCustom = it.SELECTORCUSTOM || '';
const selectorTypes = {
'стандартный блок': selectorBlock && selectorBlockIs,
'zero block': selectorZeroBlock && selectorZeroBlockIs,
'элемент в zero block': selectorElement && selectorElementIs,
'кастомный селектор': selectorCustom
};
const selectorErrorNames = {
'стандартный блок': 'Введи хотя бы один селектор: класс стандартного блока.',
'zero block': 'Введи хотя бы один селектор: класс zero block.',
'элемент в zero block': 'Введи хотя бы один селектор: класс элемента в zero block.',
'кастомный селектор': 'Введи хотя бы один кастомный селектор.'
};
const selectorFinal = selectorTypes[it.SELECTORTYPE] || '';
if (!selectorFinal) return selectorErrorNames[it.SELECTORTYPE];
const background = it.BGCOLOR ? `background:${it.BGCOLOR}!important` : '';
if (!background) return "Введи цвет фона."
const blur = (it.BLURUNIT === '>_' ? it.BLURCUSTOM : (it.BLUR ? it.BLUR + (Number(it.BLUR) === 0 ? '' : it.BLURUNIT) : '')) || '';
const saturate = (it.SATURATEUNIT === '>_' ? it.SATURATECUSTOM : (it.SATURATE ? it.SATURATE + (Number(it.SATURATE) === 0 ? '' : it.SATURATEUNIT) : '')) || '';
const hasFilter = [
blur,
saturate
].some(Boolean);
if (!hasFilter) return "Введи хотя бы одно значение: величину размытия или величину насыщенности.";
const f = [
blur && `blur(${blur})`,
saturate && `saturate(${saturate})`,
].filter(Boolean).join(' ');
const filters = `--yu-008-f:${f};-webkit-backdrop-filter:var(--yu-008-f);backdrop-filter:var(--yu-008-f);`;
%> <%-~'\n'_%>
Понравилось решение?