URL скопирован в буфер обмена!
Как сделать эффект свечения при наведении на кнопку на Tilda?
С помощью этой модификации можно добавить эффект подсветки курсора при наведении на шейп или кнопку в Zero Block Tilda. Можно настроить размер свечения, выбрать цвет, задать прозрачность и скорость эффекта при ховере.
Модификация работает с включенным Autoscale в блоках
Модификация работает только c Zero Block
Номер модификации в библиотеке TiCode
Класс элемента
Размер области свечения
Цвет свечения
Прозрачность фильтра
Скорось анимации
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD000--><script>
document.addEventListener("mousemove", (e) => {
if (!(e.target instanceof Element)) return;
const group = e.target.closest(".ti-circle.tn-group");
const target = group
? group.querySelector(":scope > .tn-molecule")
: e.target.closest(".ti-circle:not(.tn-group) .tn-atom");
if (!target) return;
const rect = target.getBoundingClientRect();
if (!rect.width || !rect.height) return;
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;
target.style.setProperty("--x", x + "%");
target.style.setProperty("--y", y + "%");
});
</script>
<style>
.ti-circle:not(.tn-group) .tn-atom,
.ti-circle.tn-group > .tn-molecule {
position: relative;
overflow: hidden;
}
.ti-circle:not(.tn-group) .tn-atom::before,
.ti-circle.tn-group > .tn-molecule::after {
content: "";
position: absolute;
z-index: 10;
width: 200px;
height: 200px;
left: var(--x, 50%);
top: var(--y, 50%);
transform: translate(-50%, -50%) scale(0);
background: radial-gradient(circle closest-side, #FFE6001A, transparent);
border-radius: 50%;
pointer-events: none;
opacity: 0;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.ti-circle:not(.tn-group) .tn-atom:hover::before,
.ti-circle.tn-group:hover > .tn-molecule::after {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
</style>
1. Создайте в Zero Block кнопку или шейп и присвойте ему класс ti-circle. Если поверх шейпа или кнопки есть дополнительные элементы, например текст или иконки, то указываем им прозрачность для курсора
Код также работает с группами формата object, которым задан фон через Background. В этом случае присвойте класс ti-circle самой группе. Для группы в этом случае нужно поставить overflow hidden
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. Указываем другие настройки в генераторе:
Размер области свечения - диаметр области свечения в пикселях;
Цвет свечения - указываем цвет области свечения;
Прозрачность фильтра - указываем прозрачность фильтра от 10% (почти незаметно) до 100% (полностью непрозрачный);
Скорость анимации - указываем время появления эффекта подсветки при наведении. Если кнопка уже имеет hover-анимацию, то указываем в генераторе такое же время ховера чтобы движение было синхронным. Обычно 0.2 секунды.
3. Копируем готовый код и вставляем в HTML блок T123. Блок кода размещаем под зеро блоком.
Код также работает с группами формата object, которым задан фон через Background. В этом случае присвойте класс ti-circle самой группе. Для группы в этом случае нужно поставить overflow hidden
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. Указываем другие настройки в генераторе:
Размер области свечения - диаметр области свечения в пикселях;
Цвет свечения - указываем цвет области свечения;
Прозрачность фильтра - указываем прозрачность фильтра от 10% (почти незаметно) до 100% (полностью непрозрачный);
Скорость анимации - указываем время появления эффекта подсветки при наведении. Если кнопка уже имеет hover-анимацию, то указываем в генераторе такое же время ховера чтобы движение было синхронным. Обычно 0.2 секунды.
3. Копируем готовый код и вставляем в HTML блок T123. Блок кода размещаем под зеро блоком.
TICODE