Повторим популярный эффект: подсветку при движении курсора по карточке. Содержимое и оформление самой карточки в примере опускаю, чтобы оставить в рецепте только необходимый для достижения эффекта код.

ХТМЛ
<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; }
Особое слово :after добавляет элемент внутрь .card чистым ЦСС, без изменения ХТМЛ‑разметки. Это удобный способ добавлять декоративные слои. Позицию эффекта задаём переменными, чтобы управлять через Яваскрипт. Для плавности добавляем opacity и transition
Яваскрипт
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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработкаРецепт
Отправить
Поделиться
Запинить

Рекомендуем другие советы