Карточки, которые прилипают и складываются в стопку при прокрутке

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

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

Прилипание сделано на чистом CSS: у каждой секции position: sticky, и браузер сам держит её на экране, пока следующая не наедет сверху. Скрипт только уменьшает кадры. Эффект сделан по мотивам «Sticky Cards» от Codegrid, но без GSAP и ScrollTrigger.

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

• Портфолио и кейсы: каждая работа получает свой экран.
• Лендинг продукта: возможности по одной, с крупными фото.
• Истории и лукбуки: кадры идут друг за другом, как слайды, но без кнопок.

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

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

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

<div class="stack">
  <section class="stack__section" data-stack-section>
    <div class="stack__image" data-stack-image><img src="photo-1.jpg" alt=""></div>
  </section>
  <!-- ещё секции -->
</div>

.stack__section { position: sticky; top: 0; height: 100svh; }

createStickyStack(document.querySelector('.stack'), { shrink: 0.5 });

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

Настройки

• Ширина и высота кадра — размер кадра относительно экрана.
• Уменьшение — до какого размера сжимается кадр, когда его накрывает следующий. При 1 кадры не сжимаются, а просто ложатся друг на друга.
• Скругление — углы кадров.
• Плавность — насколько мягко кадры догоняют прокрутку.

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

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

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

Почему прилипание не работает на моём сайте? Почти всегда из-за overflow: hidden у одного из родителей блока. Замените его на overflow: clip или уберите.

Сколько кадров можно добавить? Сколько угодно: каждый занимает один экран прокрутки.

Нужен ли GSAP, как в оригинале? Нет. Прилипание делает CSS, а остальное — около 80 строк JavaScript.