Повторим популярный эффект: подсветку при движении курсора по карточке. Содержимое и оформление самой карточки в примере опускаю, чтобы оставить в рецепте только необходимый для достижения эффекта код.
ХТМЛ<div class="card">
<!-- … -->
</div>
ЦСС.card {
position: relative;
}
.card:after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: radial-gradient(
30em circle at var(--mouseX) var(--mouseY),
rgba(150, 255, 255, .25),
transparent 40%
);
opacity: 0;
transition: .35s;
}
.card:hover:after {
opacity: 1;
}
Яваскриптconst onCardMousemove = event => {
const $card = event.currentTarget
const rect = $card.getBoundingClientRect()
const x = event.clientX - rect.left
const y = event.clientY - rect.top
$card.style.setProperty('--mouseX', `${x}px`)
$card.style.setProperty('--mouseY', `${y}px`)
}
document.querySelector('.card')
.addEventListener('mousemove', onCardMousemove)
Можно подкручивать и дорабатывать эффект, насколько позволяет ЦСС: изменять размер, цвет и прозрачность внутри градиента, использовать режимы наложения или другие типы градиентов.
Следите за производительностью, когда используете «тяжёлые» спецэффекты, особенно сразу для множества элементов. Это может стать причиной тормозов и глюков графики
Главное — понять принцип, он одинаковый для всего интерактива со стилями: получаем и обрабатываем действия в Яваскрипте, затем подставляем вычисленные значения в стили. Раньше подставлять значения в середину объёмных ЦСС‑правил было не очень удобно, но сегодня с ЦСС‑переменными делать реагирующие на действия пользователя стили несложно и удобно.
Следите за производительностью, когда используете «тяжёлые» спецэффекты, особенно сразу для множества элементов. Это может стать причиной тормозов и глюков графики
P. S.
P. P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.