Волна карточек — ряд наклонённых карточек приподнимается волной за курсором

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

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

Эффект сделан по мотивам первого экрана cardwall-template.modulify.website.

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

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

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

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

Вручную. «Скачать код» даёт готовую HTML-страницу с вашими настройками. «Скопировать код» копирует только стили, разметку и скрипт. Скрипт без зависимостей.

<div class="card-wave">
  <div class="wave-card" data-wave-card><img src="photo-1.jpg" alt=""></div>
  <!-- ещё карточки -->
</div>

createCardWave(document.querySelector('.card-wave'), { lift: 70, reach: 150 });

Настройки

• Высота волны — насколько поднимается карточка под курсором.
• Ширина волны — как далеко по ряду расходится подъём.
• Размер карточки, Длина ряда, Диагональ и Наклон — как выглядит ряд.
• Упругость и Затухание — характер пружины: резче или мягче, дольше ли карточки покачиваются.

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

Карточки остаются обычными блоками с картинками. Если в системе включено «Уменьшить движение», карточки не поднимаются. Двигается только translate, а когда волна успокоилась, скрипт засыпает до следующего движения мыши.

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

Сколько карточек можно положить? Сколько угодно: скрипт сам расставит их по ряду. Чем больше карточек, тем плотнее они перекрывают друг друга.

Работает ли на телефоне? Да, волну ведёт палец, скользящий вдоль ряда.