Параллакс-слайдер
Горизонтальная галерея с плавной прокруткой и глубиной в каждом кадре. Соберите слайды в Zero Block — добавьте движение одним скриптом.
Галерея, которую хочется листать
Слайды движутся горизонтально, а увеличенное изображение внутри каждого слайда слегка смещается в обратную сторону. Получается эффект глубины без видео, WebGL и сторонних библиотек.
Подходит для портфолио, проектов интерьера, фотографий и подборок товаров. Размеры, изображения и подписи вы оформляете в Zero Block — модификация добавляет управление и параллакс.
Страница не застревает на слайдере
Когда достигнут край галереи, следующие движения колеса прокручивают страницу. Перетаскивание не запускается при нажатии вне слайдера. После перетаскивания случайный переход по ссылке подавляется.
Доступность и движение
После фокусировки галереи клавишей Tab используйте стрелки, Home и End. Системная настройка уменьшенного движения отключает параллакс и инерцию. В демонстрации ниже 700 px работает свайп; в коде для Tilda исходный порог — 980 px.
Настройте движение
Изменения применяются к живому примеру сверху. Для установки перенесите значения в объект settings в купленном коде.
| Параметр | Как работает |
|---|---|
| speed | Множитель движения колеса: 0.2–2. |
| smooth | Доля оставшегося пути за кадр: 0.03 — мягче, 0.3 — быстрее. |
| scale | Увеличение картинки от 1 до 1.6. При 1 смещение отсутствует. |
| depth | Смещение до 25% ширины картинки; автоматически ограничено запасом увеличения. |
| breakpoint | Ширина окна, начиная с которой включаются колесо, перетаскивание и параллакс. По умолчанию 980. |
Установка в Zero Block
- Создайте Zero BlockВ настройках блока задайте CSS-класс
uc-parallax, без точки. Внутри него будет один горизонтальный слайдер. - Подготовьте область прокруткиВ настройках артборда выберите Overflow → Auto. Высота должна вмещать изображения и подписи. Не включайте для этого блока автоматическое масштабирование: оно может изменить ширину всей композиции.
- Соберите первый слайдДобавьте изображение, выберите заполнение Cover и центрирование. Поместите изображение в группу типа «Объект» с фиксированными размерами; группе задайте класс
parallax. Группа обрезает увеличенное изображение по своим границам. - Расположите остальные слайдыДублируйте группу и замените изображения. Расположите группы в один ряд с одинаковыми промежутками, часть слайдов — за правым краем артборда. Для элементов используйте Window Container. Подписи разместите отдельно под картинками, чтобы они не смещались вместе с ними.
- Настройте мобильные версииНа каждом разрешении проверьте высоту, ширину карточек и горизонтальный ряд. На телефоне слайды должны выходить за правый край, иначе прокручивать будет нечего. Не ставьте на изображения дополнительную анимацию transform.
- Вставьте код в T123После Zero Block добавьте HTML-блок T123 и вставьте полный установочный код один раз на страницу. Настройки находятся в объекте
settings. Не вставляйте скрипт отдельно в каждую группу. - Опубликуйте и проверьтеПроверьте колесо, перетаскивание, переход к следующему блоку на краю галереи, ссылки и свайп на телефоне. Код работает на опубликованной странице; редактор Zero Block не является проверкой результата.
Вопросы о слайдере
Почему слайды не двигаются?
Если весь ряд помещается в артборд, прокрутки нет. Проверьте классы uc-parallax и parallax, Overflow Auto и координаты последних слайдов.
Работает ли это на телефоне?
Да, как горизонтальная галерея с нативным свайпом. Увеличение и параллакс отключены ниже breakpoint, чтобы сохранить удобное управление.
Можно ли добавить несколько слайдеров?
Да. Задайте каждому Zero Block класс uc-parallax. Код T123 достаточно вставить один раз; блоки имеют независимое положение прокрутки.
Где взять изображения из демо?
В демо использованы графические пейзажи, нарисованные CSS. В Zero Block вы размещаете свои фотографии или иллюстрации. Демонстрация показывает движение, а не готовый шаблон блока.
Почему параллакс не виден?
Проверьте ширину окна, настройку уменьшенного движения в системе и значение scale: при 1 у картинки нет запаса для смещения.
Что входит в стоимость 750 ₽?
Установочный HTML/CSS/JavaScript для T123 и инструкция по настройке. Вёрстку Zero Block и изображения вы подготавливаете самостоятельно.