Веер карточек — эффект при наведении на CSS и JavaScript

Что это за эффект

Несколько карточек лежат внахлёст, слегка повёрнутые, как разложенные на столе. Карточка под курсором выпрямляется и чуть увеличивается, а соседние разъезжаются в стороны и открывают её целиком: ближние дальше, дальние меньше. Порядок слоёв при этом не меняется. Карточку открывает именно движение соседей, а не скачок наверх, поэтому анимация выглядит физично и спокойно.

Когда курсор уходит, карточка снова ложится, но под новым случайным углом. Веер каждый раз выглядит немного по-другому.

Где использовать

• Список услуг или возможностей продукта: вместо сетки из одинаковых плиток.
• Тарифы, кейсы, отзывы — когда карточек немного (3–7) и каждую хочется рассмотреть.
• Страница «О нас»: фото команды или ключевые факты.

Как добавить на сайт

Через ИИ-агента — самый простой путь. Эти эффекты сделаны в первую очередь для тех, кто собирает сайт вместе с ИИ-агентом: Claude Code, Cursor или любым другим. Настройте эффект на примере выше, нажмите «Скопировать код» и вставьте его в чат агента с одной фразой: «Сделай мне такой эффект на сайте». В скопированном коде уже есть описание эффекта и инструкция для агента. Он сам перенесёт стили, разметку и скрипт, впишет их в вашу вёрстку и подставит ваши тексты и изображения. Ваши настройки сохранятся.

Если что-то нужно иначе, скажите агенту об этом теми же словами, что и человеку: «сделай на всю ширину экрана», «поставь под заголовком на главной», «замедли в два раза».

Вручную. Контейнер с карточками и одна функция. Содержимое карточек может быть любым, размер и положение задаёт скрипт:

<div class="card-fan">
  <div class="card" data-fan-card>…</div>
  <div class="card" data-fan-card>…</div>
  <div class="card" data-fan-card>…</div>
</div>

createCardFan(document.querySelector('.card-fan'), { width: 26, height: 160, tilt: 20 });

Контейнеру нужна высота и overflow: hidden. Карточки распределяются по его ширине, поэтому веер подстраивается под размер блока сам. Готовый код с текущими настройками дают кнопки «Скопировать код» и «Скачать код» выше.

Настройки

• Ширина и высота карточки: ширина — доля сцены, но не меньше 144 px.
• Наклон — разброс случайных углов в покое; 0 выкладывает карточки ровно.
• Перекрытие — насколько карточки заходят друг на друга.
• Увеличение — размер карточки под курсором.
• Раздвигание — насколько отъезжают соседи, в ширинах карточки. Ближайшие соседи всегда отходят хотя бы настолько, чтобы не закрывать увеличенную карточку.
• Длительность движения.

Доступность и производительность

Двигаются только transform, без пересчёта раскладки. На сенсорных экранах наведения нет, и карточки просто лежат веером. Если важное содержимое спрятано в перекрытых частях карточек, продублируйте его в обычном списке или сделайте карточки ссылками на подробные страницы. При настройке «Уменьшить движение» карточки меняют положение без анимации.

Частые вопросы

Сколько карточек можно положить? Удобнее всего 3–7. При большем числе перекрытие растёт, и каждой карточке остаётся мало места.

Можно ли сделать карточки ссылками? Да, содержимое карточки — обычная разметка.