Эффект при наведении на элемент в Zero-блоке
Мы привыкли, что при наведении на ссылку появляется подчёркивание. А в Zero-блоке даже этого нет, если выставить текстовому элементу ссылку в настройках. А что, если подчеркивание не просто будет появляться, но и станет цветным или градиентным, а также анимированным — появление подчёркивания начнётся в том месте, в котором вы навели мышкой на элемент?
Хм. А если подумать, то можно не только подчёркивание сделать, но и заливку всего элемента. Сложно представить… проще показать! Поэтому листайте в самый низ страницы и попробуйте навести на каждый элемент.
Если вы всё поняли, то вот простая инструкция:
Хм. А если подумать, то можно не только подчёркивание сделать, но и заливку всего элемента. Сложно представить… проще показать! Поэтому листайте в самый низ страницы и попробуйте навести на каждый элемент.
Если вы всё поняли, то вот простая инструкция:
- Задайте элементу Zero-блока класс и впишите этот класс в настройки ниже.
- Выберите остальные опции.
- Скопируйте код и вставьте его в блок T123 под Zero-блоком.
<!-- Эффект при наведении на элемент в Zero-блоке | https://necodim.ru/tilda/zero-element-hover --> <style> .my-class {
text-decoration: none;
transition: opacity 300ms cubic-bezier(0.51, 0.92, 0.24, 1);
}
.my-class::after {
--scale: 0;
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 3px; border-radius: 5px;
background: linear-gradient(135deg, #ffcc00, #ca1a2b);
transform: scaleX(var(--scale));
transform-origin: var(--x) 50%;
transition: transform 300ms cubic-bezier(0.51, 0.92, 0.24, 1);
}
.my-class:hover {
opacity: 1;
}
.my-class:hover::after {
--scale: 1;
}
</style> <script> document.querySelectorAll('.my-class').forEach((elem) => {
elem.onmouseenter = elem.onmouseleave = (e) => {
const tolerance = 10;
const left = 0;
const right = elem.clientWidth;
let x = e.pageX - elem.offsetLeft;
if (x - tolerance < left) x = left;
if (x + tolerance > right) x = right;
elem.style.setProperty('--x', `${ x }px`);
}
});
</script> Результат применения эффекта
Наведи на любой из элементов, чтобы увидеть модификацию в действии.
Заполнение фона
Много текста, но не смотря на это тут будет только подчеркивание всего элемента, чтобы вы могли увидеть разницу
