Дрейфующая галерея — бесконечное полотно фото, которое можно тащить и открывать

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

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

Пока полотно движется, оно выгибается, как барабан, в настоящем 3D: фото у верхнего и нижнего края наклоняются, уходя по барабану в глубину, а всё полотно немного отдаляется. Чем быстрее движение, тем сильнее изгиб. Когда полотно останавливается, оно снова становится плоским.

Нажмите на фото: оно перелетает со своего места на большое справа, полотно за ним бледнеет, а слева появляются название, подпись и короткий текст. Крестик, Esc или клик мимо отправляют фото обратно на место.

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

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

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

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

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

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

<div class="drift">
  <div data-drift-item data-title="Утро" data-meta="Москва / 2025" data-text="…">
    <img src="photo.jpg" alt="" width="1200" height="1600">
  </div>
  <!-- ещё фото и блок data-drift-view для открытого фото -->
</div>

createDriftGallery(document.querySelector('.drift'), { speed: 24 });

Настройки

• Скорость дрейфа — как быстро полотно плывёт само. При нуле оно стоит, пока его не тронут.
• Колонки, Размер фото и Отступы — сколько неровных колонок помещается по ширине, насколько крупные фото и как далеко они друг от друга.
• Инерция — как долго полотно катится после броска.
• Открытие — сколько длится перелёт фото на большое место и обратно.
• Плавность колеса — насколько мягко полотно догоняет колесо мыши.
• Барабан и Отдаление — насколько полотно выгибается и уменьшается, пока движется. При нуле оно остаётся плоским.

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

Фото можно открыть с клавиатуры: Tab до фото и Enter. Esc закрывает открытое фото. Если в системе включено «Уменьшить движение», полотно не плывёт само, а фото открываются без перелёта. Полотно двигается, только пока его видно на экране, и меняет только transform.

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

А как же прокрутка страницы? Колесо над галереей двигает полотно, а не страницу. Поэтому галерею лучше ставить на весь экран, как в скачиваемом примере, или давать вокруг неё место, где колесо листает страницу.

Сколько фото нужно? От десяти и больше: полотно повторяется, и чем больше фото, тем реже повторы заметны.