Горизонтальная прокрутка карточек с 3D-изгибом

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

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

Карточки вращаются через CSS 3D: perspective на сцене и rotateY с translateZ на каждой карточке. Положение каждой карточки в ленте измеряется один раз, поэтому на каждом кадре скрипт ничего не пересчитывает в раскладке страницы.

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

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

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

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

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

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

Разметка — контейнер, «липкая» сцена и лента карточек. Карточек может быть сколько угодно:

<div class="carousel">
  <div class="carousel__stage" data-carousel-stage>
    <ul class="carousel__row" data-carousel-row>
      <li class="carousel__card" data-carousel-card>…</li>
      <!-- ещё карточки -->
    </ul>
  </div>
</div>

Сцене нужны position: sticky и высота экрана, карточкам — пропорции через aspect-ratio. Ширину карточек и высоту контейнера, то есть длину прокрутки, скрипт задаёт сам:

.carousel__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.carousel__card { aspect-ratio: 3 / 4; }

createScrollCarousel(document.querySelector('.carousel'), { angle: 32, length: 400 });

Если на сайте закреплённая шапка, задайте сцене top, равный её высоте, и уменьшите высоту сцены на столько же. Скрипт читает top сам и считает прогресс от него.

Настройки

• Ширина карточки — доля ширины сцены. На узких экранах (до 640 px) используется отдельное значение, чтобы карточки не мельчили.
• Зазор — расстояние между карточками.
• Поворот — на сколько градусов карточки у краёв сцены разворачиваются к центру. 0 — обычная плоская лента.
• Глубина — насколько карточки у краёв уходят вглубь. Вместе с поворотом даёт веер: крайние карточки заходят за соседние.
• Перспектива — расстояние до зрителя. Чем меньше, тем сильнее выглядит поворот.
• Длина прокрутки — сколько листать, в высотах сцены. Чем больше карточек, тем длиннее стоит её сделать.
• Плавность — насколько мягко лента догоняет прокрутку. Сглаживает рывки колеса мыши; 0 — точное следование.
• Путь ленты — «Из-за края»: лента въезжает справа и целиком уезжает влево. «От центра»: в начале в центре стоит первая карточка, в конце — последняя, и сцена ни разу не пустеет.

Для индикатора скрипт выставляет на контейнере CSS-переменную --carousel-progress от 0 до 1. Её можно использовать в своих стилях без единой строки JavaScript.

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

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

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

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

Работает ли на телефонах? Да, это обычная прокрутка страницы. На узкой сцене карточки шире, и в кадре одновременно видно одну-две.

Нужны ли GSAP или другие библиотеки? Нет, всё делает одна функция примерно на 120 строк.