Параллакс на CSS и JavaScript: примеры и настройка

Фон движется медленнее переднего плана, карточка слегка меняет угол вслед за указателем, а изображение проходит внутри неподвижного окна. Это разные способы создать ощущение глубины на обычной веб-странице. Разберём параллакс на CSS и JavaScript: как управлять слоями, где эффект уместен и как оставить интерфейс удобным без движения.

В статье — шесть учебных эффектов и три самостоятельные страницы с настройками, объяснениями и экспортом. Можно собрать оформление на своей фразе и цветах, рассмотреть его на целой прокручиваемой странице с несколькими секциями, скачать эту страницу, скопировать части кода или забрать весь проект для дальнейшей работы.

Что такое параллакс и какую задачу он решает

В веб-интерфейсе параллакс обычно означает, что несколько визуальных слоёв изменяют положение с разной скоростью относительно прокрутки или указателя. Близкий предмет смещается заметнее далёкого — возникает ощущение пространства. Для такого приёма не обязательно строить настоящую 3D-сцену: часто достаточно двух-трёх элементов и небольших преобразований.

Само появление секции через прозрачность ещё не является параллаксом: там нет относительного движения планов. Перспектива без изменения положения тоже даёт объём, но не создаёт реакцию на прокрутку. Эти приёмы можно сочетать, если у каждого есть понятная роль.

Для формы, калькулятора, сметы или инструкции эффект должен оставаться декорацией. Не двигайте поля ввода и не прячьте нужную кнопку до определённого положения страницы. Сначала человек выполняет задачу, затем замечает оформление.

Мастерская: три страницы и шесть отдельных эффектов

Для цельного результата начните с раздела «Параллакс на целой странице». Выбор и оформление каждой страницы сохраняются отдельно от учебных эффектов. Для разбора отдельного приёма выберите сцену ниже, подставьте текст и цвета, затем настройте силу движения. Компактная сцена нужна для быстрого сравнения параметров: положение задаётся ползунком прогресса, а явный показ движения проходит диапазон автоматически и заканчивается. Этот режим моделирует входной сигнал и не заменяет проверку в окружении страницы.

Большой предпросмотр — целая веб-страница с несколькими настоящими секциями. Прокручивайте её обычным способом: сцены прокрутки реагируют на положение блоков, а неподвижные текст, ссылки и секции показывают, как эффект сочетается с содержанием. На телефоне используется обычная сенсорная прокрутка. В этом режиме можно выбрать одну из трёх готовых композиций или страницу с отдельным учебным эффектом и скачать именно показанный макет. После закрытия вы вернётесь к прежнему месту мастерской.

Глубина · Движение · Готовый код

Мастерская параллакса

Три целые страницы и шесть учебных эффектов. Выберите продуктовую историю, портфолио или многослойный мир; настройте оформление и сравните со спокойной версией.

Открыть мастерскую отдельно ↗

Прокрутите готовый макет внутри окна или откройте страницу целиком. Движение следует обычной прокрутке, в том числе на узком экране. HTML и ZIP выбранной страницы скачиваются отдельно от проекта всей мастерской.

В компактной сцене карточка реагирует на мышь или перо; на телефоне доступны положение в настройках и кнопочный показ движения. В полной странице наклон карточки также связан с прокруткой, поэтому работает и при сенсорном пролистывании; на десктопе добавляется реакция на указатель. Ни один режим не читает датчики или наклон устройства. Сенсорный жест не захватывается ради декоративного эффекта.

1. Выберите сцену. Сначала рассмотрите неподвижную композицию, затем включите эффект и измените прогресс ползунком в компактном примере.
2. Меняйте один параметр. Сравните малую и большую амплитуду, потом подберите цвета и подпись.
3. Проверьте диапазон. Переместите прогресс от начала к концу или запустите конечный показ движения. По краям не должно появляться пустое пространство.
4. Оцените целую страницу. Откройте большой предпросмотр и прокрутите настоящие секции, включая иллюстрацию и соседние текстовые блоки. Попробуйте другую сцену, затем закройте окно, чтобы продолжить с прежнего места.
5. Сравните без движения. Главная надпись и назначение блока должны оставаться понятными.
6. Заберите результат. Скачайте полную страницу, возьмите HTML/CSS/JavaScript-фрагменты выбранного эффекта для своего сайта или полный проект мастерской.

Продуктовая история: предмет закреплён, рассказ продолжается

В макете «Нова» главный экран знакомит с переносной лампой, а следующая сцена на некоторое время остаётся на месте. При обычной прокрутке предмет приближается, меняет небольшой угол, затем его части расходятся. Читатель последовательно видит форму, свет и устройство. После сцены он попадает в обычные разделы с подробностями.

Это сочетание position: sticky и прогресса закреплённого участка. Чем длиннее участок, тем больше прокрутки отведено истории. Настройка «Темп истории» меняет этот путь; «Сила движения» — разницу положений предмета. Таймер не управляет рассказом: человек выбирает темп своим скроллом.

const availablePath = trackHeight - stageHeight;
const progress = Math.min(1, Math.max(0,
  (navHeight - trackTopRelativeToScroller) / Math.max(1, availablePath)
));
// progress используется для декоративной формы и её деталей.
// Тексты всех этапов также находятся в обычных разделах страницы.

Так можно объяснить устройство товара, этапы процесса или преимущество услуги. Важные характеристики и действия оставляйте доступными вне анимации. При паузе декор замирает, но подпись текущего этапа следует прокрутке. В спокойном режиме длинный закреплённый участок убирается; все содержательные разделы остаются в потоке. Лампа — наша учебная иллюстрация, не карточка реального товара.

Редакционное портфолио: движение связывает разделы

«Линия» устроена иначе: крупный заголовок, собственные бумажные иллюстрации, манифест, подборка проектов и заключительный блок. У карточек изменяется только декоративная часть. Названия и подписи не становятся движущимися целями. На широком экране краткое описание подборки удерживается рядом с проектами, а на узком переходит в обычный поток.

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

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

Многослойный мир: прокрутка становится движением камеры

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

Для эффекта не требуется видео или полноценный 3D-движок. Здесь используются авторские SVG-слои с запасом по краям. Ближний план смещается заметнее дальнего, а общий сдвиг ограничен. На сенсорном экране управление остаётся тем же: обычное вертикальное пролистывание, без датчиков и специального движения пальцем по сцене.

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

Как забрать страницу и встроить её в свой проект

Скачанная новая страница использует обычную прокрутку документа. Панель редактора и большой диалог в неё не входят. Переключатель «Без движения» находится в подвале. Внешние фотографии, ресурсы референсных сайтов и обязательное подключение CDN не требуются.

Когда переносите отдельные части, подключите CSS к HTML и добавьте JavaScript после разметки либо с атрибутом defer. Идентификаторы разделов должны совпадать с внутренними ссылками. Не подключайте одновременно два контроллера к одному и тому же набору слоёв. В ZIP страницы эти подключения уже выполнены.

Слои, скорость и запас по краям

Постройте композицию от дальнего плана к ближнему. Например: небо, горы, деревья. При одинаковом входном сигнале фон смещается на 6 пикселей, горы — на 14, деревья — на 24. Цифры не являются стандартом: они задают отношения и помогают начать с умеренного движения.

Заголовок и кнопка лежат отдельным устойчивым слоем. Декоративным элементам не нужны обработчики нажатия; pointer-events: none позволяет им не перекрывать управление. Ненужные для содержания изображения скрывают от вспомогательных технологий, а важной фотографии дают осмысленное текстовое описание.

<section class="px-scene" aria-labelledby="px-title">
  <div class="px-layer px-layer-far" aria-hidden="true"></div>
  <div class="px-layer px-layer-near" aria-hidden="true"></div>
  <div class="px-content">
    <h3 id="px-title">История одного места</h3>
    <a href="#details">Посмотреть проект</a>
  </div>
</section>
<style>
.px-scene {
  position: relative; isolation: isolate;
  min-height: 20rem; overflow: hidden;
  background: #173b43;
}
.px-layer {
  position: absolute; inset: -3rem;
  pointer-events: none;
}
.px-layer-far {
  background: radial-gradient(circle at 70% 30%, #efbb69 0 8%, transparent 8.5%);
  transform: translateY(var(--far-y, 0px));
}
.px-layer-near {
  background: linear-gradient(165deg, transparent 52%, #0c262f 52%);
  transform: translateY(var(--near-y, 0px));
}
.px-content { position: relative; color: #fff; padding: 3rem 1.5rem; }
.px-content a { color: inherit; }
</style>

В этом фрагменте стили ожидают значения --far-y и --near-y. Без сценария управления они равны нулю, и композиция остаётся статичной. При нескольких сценах добавьте собственные уникальные идентификаторы заголовков и настоящие адреса ссылок.

Запас inset: -3rem делает декоративный слой больше окна. Если позволить ему двигаться дальше этого запаса, появится пустой край. Амплитуду, размеры слоя и масштаб картинки настраивайте вместе. Один большой overflow: hidden на всей странице только скроет проблему и может обрезать полезное содержимое.

Прокрутка и JavaScript: сначала нормализуем положение

Следующий самостоятельный рецепт привязывает слои к прокрутке отдельного контейнера. Он отличается от панели мастерской с ползунком прогресса. Для внутренней области удобно выразить прокрутку числом от 0 до 1: делим scrollTop на доступный путь scrollHeight − clientHeight, затем ограничиваем диапазон. Если содержимое не длиннее окна, делить нельзя: оставляем нейтральную композицию.

function getScrollProgress(scroller) {
  const distance = scroller.scrollHeight - scroller.clientHeight;
  if (distance <= 0) return 0.5;
  return Math.min(1, Math.max(0, scroller.scrollTop / distance));
}

function attachParallax(scroller, scene) {
  const preference = matchMedia('(prefers-reduced-motion: reduce)');
  let frame = null;
  let paused = false;
  let destroyed = false;
  const reset = () => {
    scene.style.setProperty('--far-y', '0px');
    scene.style.setProperty('--near-y', '0px');
  };
  const render = () => {
    frame = null;
    if (paused || preference.matches || document.hidden) { reset(); return; }
    const position = getScrollProgress(scroller) - 0.5;
    scene.style.setProperty('--far-y', `${position * 16}px`);
    scene.style.setProperty('--near-y', `${position * 48}px`);
  };
  const schedule = () => {
    if (!destroyed && frame === null) frame = requestAnimationFrame(render);
  };
  scroller.addEventListener('scroll', schedule, { passive: true });
  window.addEventListener('resize', schedule);
  preference.addEventListener('change', schedule);
  document.addEventListener('visibilitychange', schedule);
  schedule();
  return {
    setPaused(value) { paused = Boolean(value); schedule(); },
    destroy() {
      destroyed = true;
      if (frame !== null) cancelAnimationFrame(frame);
      frame = null;
      scroller.removeEventListener('scroll', schedule);
      window.removeEventListener('resize', schedule);
      preference.removeEventListener('change', schedule);
      document.removeEventListener('visibilitychange', schedule);
      reset();
    }
  };
}

Вызовите функцию после появления элементов: attachParallax(document.querySelector('.px-scroll'), document.querySelector('.px-scene')). Область .px-scroll должна иметь ограниченную высоту, overflow-y: auto и достаточное содержимое. Иначе путь прокрутки останется нулевым.

requestAnimationFrame() планирует обновление перед следующей отрисовкой. Здесь несколько событий объединяются в один ожидающий кадр; непрерывного фонового цикла нет. Это не универсальное ограничение частоты событий scroll: кадр и событие могут приходить с близкой частотой. Мы избегаем повторной постановки одного и того же обновления.

В данном фрагменте пауза возвращает нейтральное положение. В отдельном редакторе можно дополнительно замораживать текущий кадр, но спокойный режим всё равно должен давать устойчивую композицию. При удалении блока вызывайте destroy(), чтобы убрать обработчики.

Параллакс на CSS: scroll-driven animations как улучшение

CSS умеет связывать продвижение анимации с прокруткой, а не с прошедшим временем. animation-timeline задаёт источник, а @keyframes — положения слоя. Поддержку проверяйте для конкретного проекта и оставляйте обычную композицию без эффекта.

.px-scroll {
  max-height: 24rem;
  overflow-y: auto;
}
.px-css-layer { transform: translateY(0); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .px-scroll { scroll-timeline-name: --px-path; }
    .px-css-layer {
      animation: px-depth-shift 1ms linear both;
      animation-timeline: --px-path;
    }
  }
}
@keyframes px-depth-shift {
  from { transform: translateY(-24px); }
  to { transform: translateY(24px); }
}

Слой .px-css-layer находится внутри .px-scroll. Между началом и концом прокрутки он проходит диапазон от −24 до 24 пикселей. Здесь миллисекунда не означает, что эффект проскочит за это время: ход задан прокручиваемой шкалой. Обычное состояние вне блока поддержки — неподвижное.

Именованная шкала помогает явно выбрать нужный контейнер. У функции scroll() есть варианты nearest, root и self. Не путайте прокрутку маленького примера с корневой прокруткой документа.

Размещайте animation-timeline после сокращённого animation: сокращение сбрасывает ранее объявленную шкалу. И не запускайте CSS и JavaScript одновременно для одного transform. Выберите один механизм; другой оставьте отключённым или используйте статичный fallback. @supports проверяет понимание декларации, но не заменяет визуальную проверку готового блока.

Почему background-attachment: fixed не решает всё

У неподвижного фона есть простой эффект глубины: содержание проходит поверх изображения, привязанного к окну браузера. Но это не управление скоростью нескольких слоёв. У background-attachment три разных режима: fixed связан с viewport, scroll — с элементом, local — с его прокручиваемым содержимым.

На мобильных устройствах нельзя считать fixed гарантированно работающим аналогом десктопного поведения. В проверенных данных совместимости MDN для Safari iOS указано частичное исполнение: значение распознаётся, но не даёт эффекта. Поэтому успешная проверка синтаксиса ещё не доказывает неподвижность фона.

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

Карточка по указателю: координаты и небольшой угол

Для наклона карточки нужно узнать положение указателя относительно её неподвижной области. Сначала получаем прямоугольник, переводим координаты в диапазон от −1 до 1, затем умножаем на небольшой угол. Измеряйте внешнюю рамку; если измерять уже наклоняемый элемент, его меняющаяся геометрия может вмешиваться в расчёт.

function pointerPosition(event, bounds) {
  if (bounds.width <= 0 || bounds.height <= 0) return { x: 0, y: 0 };
  const clamp = value => Math.min(1, Math.max(-1, value));
  return {
    x: clamp((event.clientX - bounds.left) / bounds.width * 2 - 1),
    y: clamp((event.clientY - bounds.top) / bounds.height * 2 - 1)
  };
}

// В обработчике pointermove, после проверки режима движения:
// const position = pointerPosition(event, frame.getBoundingClientRect());
// card.style.transform = `rotateX(${-position.y * 5}deg) rotateY(${position.x * 5}deg)`;
// При pointerleave, паузе и уменьшенной анимации: card.style.transform = 'none';

getBoundingClientRect() возвращает размер и положение относительно окна, поэтому его можно сопоставлять с clientX и clientY. События Pointer Events позволяют различать мышь, перо и сенсорный ввод; одинаковое имя события не означает одинаковый пользовательский сценарий.

Добавьте внешней рамке perspective: 900px, а внутренней карточке — преобразование. Меньшее значение перспективы усиливает искажение, большее делает его спокойнее; геометрия описана в справке perspective. Начните с угла около пяти градусов и проверьте читаемость.

У компактного примера на телефоне есть статичное состояние и отдельный демонстрационный запуск. В полном предпросмотре и скачанной полной странице карточка получает плавный наклон от обычной прокрутки. Не запрещайте её через touch-action: none ради декорации. Важные данные и клавиатурный фокус остаются видимыми независимо от положения указателя.

Окно изображения: движение без пустых краёв

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

.px-image-window {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 1rem;
  background: #d8e9e2;
}
.px-image-window img {
  position: absolute;
  width: 100%; height: calc(100% + 64px);
  inset: -32px 0 auto;
  object-fit: cover;
  transform: translateY(var(--image-y, 0px));
}
@media (prefers-reduced-motion: reduce) {
  .px-image-window img { transform: none; }
}

Внутри блока находится ваша картинка: <img src="project.jpg" alt="Описание проекта">. Если смещение ограничено ±24 пикселями, запас в 32 пикселя с каждой стороны закрывает окно. Не увеличивайте амплитуду независимо от высоты изображения. Само движение можно связать с нормализованной прокруткой через --image-y.

Подбирайте кадр с учётом обрезки: лицо, подпись на фотографии или важная деталь не должны исчезать за рамкой. Для декоративного рисунка используйте пустой alt; для содержательной фотографии сохраняйте полезное описание. В мастерской свои SVG-иллюстрации, поэтому можно изучить принцип без загрузки чужих фотографий.

Галерея и текстура: глубина без перехвата страницы

Галерея может выглядеть объёмной за счёт перспективы и разных небольших смещений карточек. Внутренняя прокрутка показывает новые элементы, а вертикальная страница продолжает идти обычным образом. Сначала обеспечьте понятный доступ к каждому проекту, затем добавьте движение его декоративных частей.

.px-gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 72%);
  gap: 1rem; overflow-x: auto;
  padding: 1rem;
  scroll-snap-type: x proximity;
  perspective: 1000px;
}
.px-gallery-card { scroll-snap-align: start; }
.px-gallery-card:focus-within {
  outline: 2px solid #155b61;
  outline-offset: 3px;
}

Этот фрагмент задаёт основу галереи, а не готовый параллакс: относительное движение добавляется отдельно. Мягкая привязка proximity помогает остановиться возле карточки без жёсткого требования при каждом жесте. Различие режимов описано в документации scroll-snap-type.

Текстурный фон — самый сдержанный сценарий: узор медленно смещается под устойчивым содержимым. Для бесшовного рисунка можно повторять фон, но следите за стыками. Простую цветовую основу удобно подобрать в нашем генераторе CSS-градиентов. Масштабная тёмная текстура не должна снижать контраст текста.

Как выбрать амплитуду, сглаживание и мобильный вариант

Амплитуда определяет максимальное смещение или угол. Разница скоростей показывает, насколько заметно расходятся планы. Сглаживание смягчает переход к целевому положению. Длительность нужна конечному автоматическому показу в компактной сцене. В большом предпросмотре и скачанной полной странице параллакс от прокрутки следует действию пользователя и не заканчивается через заданные секунды.

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

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

Для карточки по указателю мышь и касание имеют разные роли. Реакция на свободное движение курсора подходит десктопу; телефон сохраняет прокрутку и обычные нажатия. Ползунок положения позволяет рассмотреть слои, но не должен становиться обязательным условием использования содержимого.

Спокойный режим, пауза и производительность

Учитывайте prefers-reduced-motion: это системное предпочтение уменьшить необязательное движение. Для декоративного параллакса оставьте нейтральную композицию. Обычная пауза может заморозить текущий кадр; спокойный режим должен отдельно возвращать устойчивое оформление.

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

Для начала используйте transform и небольшое количество слоёв. Большие размытые тени, фильтры и постоянные изменения геометрии могут увеличивать стоимость отрисовки. Это ориентир для выбора, а не гарантия частоты кадров; сравнивайте версии через инструменты производительности. Практические принципы собраны в руководстве web.dev.

Сначала прочитайте размеры элементов, затем примените изменения. Не измеряйте каждый слой между каждой записью стиля. Не добавляйте will-change ко всем блокам заранее — сначала найдите конкретное затруднение. Одна спокойная сцена обычно полезнее нескольких одновременно работающих тяжёлых эффектов.

Проверка ширины в браузере помогает найти переполнение, но не измеряет плавность реального телефона. Оцените масштаб, клавиатурный фокус и контраст, затем откройте результат на устройстве с касанием. Наличие спокойного режима само по себе не подтверждает соответствие всем требованиям доступности.

Как встроить пример и что проверить перед публикацией

HTML задаёт содержимое и слои, CSS — размеры и оформление, JavaScript — входной сигнал и управление там, где оно нужно. Если выбранный пример использует сценарий, один CSS-фрагмент не воспроизведёт его реакцию. Большой предпросмотр помогает оценить готовую страницу ещё до скачивания. Для первого запуска у себя возьмите полную HTML-страницу с секциями, а для встраивания эффекта в существующий сайт перенесите необходимые фрагменты вместе.

1. Начните с отдельного блока. Добавьте выбранную сцену к тестовой странице, например собранной в нашем конструкторе Bootstrap 5.
2. Сохраните структуру. Контейнер прокрутки, внешняя рамка и движущийся слой имеют разные задачи. Не заменяйте их одним элементом без изменения расчёта.
3. Используйте свой префикс. Ограничьте стили классами компонента. В WordPress подключайте файлы на нужной странице через отдельный плагин или дочернюю тему.
4. Проверьте без движения. Все ссылки, подписи и изображения должны оставаться доступными. При отключённом JavaScript содержимое не исчезает.
5. Проверьте управление и края. Клавиатура, начало и конец прокрутки, длинная фраза, увеличение масштаба, узкий экран и настоящий телефон.

Почему у примера ничего не движется?

В компактной сцене проверьте явный запуск, спокойный режим и положение ползунка; попробуйте показ движения. В большом предпросмотре и скачанной полной странице прокрутите настоящие секции: движение зависит от положения блока, а карточка на телефоне получает наклон от прокрутки. Реакция на мышь или перо дополнительно работает на десктопе. При самостоятельном встраивании проверьте источник прокрутки, подключение JavaScript и совпадение классов.

Почему картинка открывает пустой край?

Смещение превышает запас изображения. Уменьшите амплитуду или увеличьте слой, затем проверьте обе крайние позиции. Обрезка всей страницы не исправляет размеры картинки.

Можно ли сделать только на CSS?

Некоторые варианты — да: неподвижный фон или шкала прокрутки при поддержке браузером. Реакция на координаты указателя и панель редактирования обычно требуют JavaScript. Выбирайте механизм по сценарию, сохраняя статичный вариант.

Нужно ли добавлять параллакс во все разделы?

Лучше выделить один-два смысловых акцента. Между ними оставьте обычное пространство для чтения и действий. Для дополнительной диагностики используйте наше руководство по Chrome DevTools, а текстовые акценты можно отдельно подобрать в мастерской CSS-анимации текста.