Анимация при прокрутке — сетка изображений раскрывается в один кадр

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

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

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

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

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

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

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

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

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

Разметка — контейнер, «липкая» сцена и ровно девять карточек. Центральной считается пятая:

<div class="scroll-grid">
  <div class="scroll-grid__stage" data-grid-stage>
    <div data-grid-card><img src="1.jpg" alt=""></div>
    <!-- ещё восемь карточек -->
  </div>
</div>

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

.scroll-grid__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }

createScrollGrid(document.querySelector('.scroll-grid'), { length: 300, zoom: 2 });

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

Настройки

• Ширина и высота карточки — размер карточек в начале, в процентах от сцены. На узких экранах (до 640 px) используются отдельные значения, чтобы сетка не мельчила.
• Зазор и скругление — к концу анимации оба плавно уходят в ноль.
• Приближение — насколько изображения увеличены внутри карточек в начале.
• Длина прокрутки — сколько листать, в высотах сцены. 300% — три экрана.
• Паузы в начале и в конце — доля пути, на которой сетка или финальный кадр стоят на месте, чтобы их успели рассмотреть.
• Плавность — насколько мягко сетка догоняет прокрутку. Сглаживает рывки колеса мыши; 0 — точное следование.

Для подписи и индикатора скрипт выставляет на контейнере CSS-переменные --grid-progress и --grid-reveal, обе от 0 до 1. Их можно использовать в своих стилях без единой строки JavaScript.

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

Анимируются только transform и border-radius, поэтому браузер не пересчитывает раскладку страницы на каждом кадре. Если в системе включено «Уменьшить движение», сцена не закрепляется, и сетка просто стоит на месте. Изображениям стоит оставить осмысленные alt: для скринридера это обычная галерея.

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

Можно ли поставить другое количество изображений? Эффект рассчитан на сетку 3×3: девять карточек, центральная пятая.

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

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