Слайдер с параллаксом — полноэкранные слайды въезжают маской, фото уплывает в глубину

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

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

Движение идёт по кривой с резким стартом и долгим мягким доезжанием.

Эффект сделан по мотивам «Story Zoom» от Codegrid. Там смена идёт по клику в любом месте и только вперёд, а здесь это полноценный слайдер: кнопки, стрелки клавиатуры, свайп и автопрокрутка.

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

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

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

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

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

<div class="story" data-story-slider tabindex="0">
  <div data-story-slide><img src="slide-1.jpg" alt=""></div>
  <div data-story-slide><img src="slide-2.jpg" alt=""></div>
  <button data-story-prev>←</button><button data-story-next>→</button>
</div>

createStorySlider(document.querySelector('.story'), { duration: 1500, autoplay: 0 });

Настройки

• Длительность — время одной смены.
• Въезд фото и Уход фото — сила параллакса: насколько фото нового слайда доезжает и насколько старое уплывает.
• Автопрокрутка — через сколько секунд слайд меняется сам. При нуле только по кнопке, стрелке или свайпу.

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

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

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

Сколько слайдов можно поставить? Сколько угодно.

Работает ли на телефоне? Да, слайды листаются свайпом влево и вправо.