Анимация при прокрутке — картинки из текста перелетают на таймлайн

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

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

Эффект связывает два экрана в одну историю: сначала человек читает фразу, а потом видит, как её «кадры» собираются в работу. Идея — Butter Scroll с dimaac.com; здесь он переписан без библиотек.

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

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

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

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

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

Вручную. В тексте — пустые слоты, ниже — дорожка с ячейками, а картинки лежат в ячейках. Скрипт сам рисует их поверх слотов и уводит вниз при прокрутке:

<div class="butter-scroll">
  <p>Монтаж <span data-butter-slot></span> — это когда кадры <span data-butter-slot></span> …</p>
  <div data-butter-track>
    <div data-butter-cell><img src="1.jpg" alt=""></div>
    <div data-butter-cell><img src="2.jpg" alt=""></div>
  </div>
</div>

[data-butter-slot] { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: middle; }
[data-butter-cell] { aspect-ratio: 1; }

createButterScroll(document.querySelector('.butter-scroll'), { stagger: 10, tilt: 12 });

Слотов и ячеек должно быть поровну: первая картинка летит из первого слота, вторая — из второго. Размер слота задан в em, поэтому он растёт вместе с текстом. Вместо <img> в ячейке может быть <video>.

Настройки

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

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

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

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

Нужны ли GSAP, ScrollTrigger или Lenis? Нет. Оригинал собран на них, а здесь всё делает одна функция без зависимостей.

Можно ли больше пяти картинок? Да, добавьте слоты в текст и столько же ячеек в дорожку и поправьте число колонок.