Барабан слов — крупные слова прокатываются по барабану при прокрутке

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

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

Идея взята с экрана загрузки aperture-template.modulify.website. Там барабан крутится сам, пока грузится страница, а здесь его ведёт прокрутка.

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

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

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

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

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

<div class="drum">
  <div class="drum__stage" data-drum-stage aria-label="Студия — сайты и бренды">
    <span data-drum-word aria-hidden="true">Студия</span>
    <span data-drum-word aria-hidden="true">Сайты</span>
    <span data-drum-word aria-hidden="true">Бренды</span>
  </div>
</div>

createScrollDrum(document.querySelector('.drum'), { step: 26, length: 400 });

Настройки

• Шаг барабана — как далеко друг от друга стоят слова. Чем меньше, тем больше слов видно сразу.
• Перспектива — насколько глубоким выглядит поворот.
• Затемнение — насколько бледнеют слова у краёв.
• Длина прокрутки — сколько нужно пролистать, чтобы прокрутить весь барабан.
• Плавность — насколько мягко барабан догоняет прокрутку.

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

Слова на барабане скрыты от скринридеров, а всю фразу целиком читает подпись сцены (aria-label). Если в системе включено «Уменьшить движение», барабан поворачивается точно за прокруткой, без догоняния. Двигается только transform, а когда прокрутка стоит, скрипт не работает.

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

Какой шрифт лучше? Узкий и жирный: слова крупные, и узкий шрифт помещается в ширину экрана. В примере это Google Sans Flex с узкой шириной.

Сколько слов можно поставить? Сколько угодно. Чем больше слов, тем длиннее стоит сделать прокрутку.