Карточки выезжают на фоне приближающегося фото при прокрутке

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

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

Так часто делают первые экраны сайтов клиник, студий и сервисов: фото создаёт атмосферу, а карточки по одной рассказывают главное. Эффект сделан по мотивам сайта детской стоматологии Boribay Kids (сделан на Tilda), но без конструктора и библиотек.

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

• Первый экран сайта услуг: фото помещения или команды и три главных преимущества.
• Блок «Почему мы» на лендинге.
• Портфолио: фото проекта и карточки с задачей, решением и результатом.

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

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

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

<div class="zoom">
  <div class="zoom__stage" data-zoom-stage>
    <img class="zoom__image" data-zoom-image src="photo.jpg" alt="">
    <div class="zoom__card" data-zoom-card><h3>Заголовок</h3><p>Текст</p></div>
    <!-- ещё карточки -->
  </div>
</div>

createZoomCards(document.querySelector('.zoom'), { zoom: 1.25, stagger: 22 });

Высоту блока (длину прокрутки), размер и место карточек скрипт задаёт сам: карточки делят ширину поровну, а высоту берут по самой высокой. Если на сайте закреплённая шапка, задайте сцене top, равный её высоте.

Настройки

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

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

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

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

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

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

Нужны ли библиотеки? Нет, всё делает одна функция без зависимостей.