Разрезанный слайдер — картинка в двух сдвинутых половинах, смена маской из увеличения

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

Картинка в центре экрана разрезана на две половины: верхняя сдвинута влево, нижняя вправо. Нажмите «вперёд»: следующая картинка въезжает поверх прежней справа налево и одновременно опускается из двукратного увеличения. Нижняя половина чуть отстаёт от верхней, и смена выглядит как ступенька. Назад — то же самое слева направо.

Поверх картинки по кольцу движутся заголовки: текущий в центре и горит белым, соседние приглушены по бокам. Слайдер бесконечный: после последней картинки снова идёт первая. Эффект сделан по мотивам «Modular Carousel» от Codegrid, с той же кривой движения.

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

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

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

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

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

<div class="split" data-split-slider tabindex="0">
  <div class="split__frame" data-split-frame>
    <img src="project-1.jpg" alt=""><img src="project-2.jpg" alt=""><img src="project-3.jpg" alt="">
  </div>
  <p data-split-title>Проект 1</p><p data-split-title>Проект 2</p><p data-split-title>Проект 3</p>
  <button data-split-prev>←</button><button data-split-next>→</button>
</div>

createSplitSlider(document.querySelector('.split'), { offset: 15, zoom: 2 });

Настройки

• Сдвиг половин — насколько половины разъехались вбок. При нуле картинка целая.
• Приближение — с какого увеличения новая картинка опускается до обычного размера.
• Длительность и Отставание низа — время смены и насколько нижняя половина отстаёт.
• Автопрокрутка — через сколько секунд картинка меняется сама. При нуле только по кнопке, стрелке или свайпу.

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

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

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

Сколько картинок можно поставить? Сколько угодно, с одним заголовком на каждую.

Как сделать картинку целой, без разреза? Поставьте «Сдвиг половин» на ноль.