Рецепт вёрстки: эффект подсветки от движения курсора

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

ХТМЛ
<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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

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

Свежак

Веб‑разработка

Интерфейс

Текст

Дизайн

Веб‑разработка

Как бороться с багами

Веб‑инспектор для дизайнеров