Параллакс-эффект: что это и как сделать на CSS и JavaScript

Помните детство, когда вы ехали в машине и смотрели в окно? Близкие объекты мелькали со скоростью света, а далёкие горы почти стояли на месте. Это и есть параллакс — оптическая иллюзия, которую веб-разработчики научились виртуозно воспроизводить на экранах.

В мире веб-дизайна параллакс стал настоящим «убийцей скуки» — эффектом, который заставляет пользователей залипать на сайте и делиться ссылками в соцсетях с комментарием «Смотри, какая красота!». Технически это всего лишь разная скорость движения элементов при прокрутке или движении курсора, но визуально — магия глубины на плоском экране.

Сегодня разберём, как создать этот эффект двумя основными способами: через CSS (быстро и элегантно) и JavaScript (мощно и гибко). Предупреждаю сразу — после освоения параллакса вы рискуете добавлять его везде, даже в корпоративные формы заявок на отпуск.

Что такое параллакс-эффект и зачем он нужен

Если объяснять на пальцах (в прямом смысле), то возьмите палец, поднесите к лицу и попеременно смотрите на него то левым, то правым глазом. Видите, как он «прыгает» относительно фона? Вот это и есть параллакс в чистом виде — иллюзия движения объектов относительно друг друга, создающая ощущение глубины.

В веб-дизайне этот природный феномен превратился в мощный инструмент вовлечения. Когда пользователь скроллит страницу или двигает мышью, элементы начинают «танцевать» с разной скоростью — близкие объекты мчатся быстро, дальние плывут медленно. Результат? Плоский экран внезапно обретает объём, а обычная страница превращается в интерактивное пространство.

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

Где чаще всего встречается параллакс:

• Лендинги — для презентации продукта с максимальным визуальным воздействием.
• Промо-сайты — когда нужно произвести впечатление на инвесторов или клиентов.
• Творческие портфолио — дизайнеры и агентства любят показать свои навыки.
• Интернет-магазины — для создания эмоциональной связи с товаром.
• Блоги и медиа — чтобы сделать чтение более захватывающим.

Варианты реализации параллакса: CSS или JavaScript

Здесь начинается классическая дилемма разработчика: что выбрать — элегантность CSS или мощь JavaScript? Каждый подход имеет свои плюсы и минусы, и выбор зависит от того, насколько сложный эффект вы планируете создать (и насколько вы готовы жертвовать производительностью ради красоты).

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

JavaScript — это уже автомобиль: мощно, гибко, но требует больше топлива (ресурсов процессора). Зато с его помощью можно создать что угодно — от реакции на движение курсора до сложных частичных систем. Главный подводный камень — каждое движение мыши или прокрутка вызывает пересчёт координат, что может превратить плавную анимацию в слайд-шоу на слабых устройствах.

Золотое правило: начинайте с CSS, если эффект можно реализовать таким способом. Переходите к JavaScript только когда нужна интерактивность или сложная логика. И помните — пользователь должен восхищаться эффектом, а не ждать, пока страница перестанет тормозить.

Сравнение FPS для CSS и JavaScript-параллакса на мобильных и десктопных устройствах. CSS даёт более плавную анимацию, особенно на мобильных.

Реализация параллакса на CSS

Простейший метод с background-attachment: fixed

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

<div class=»parallax-section»>

  <h1>Добро пожаловать в космос</h1>

  <p>Здесь мог быть ваш текст о покорении галактик</p>

</div>

.parallax-section {

  background-image: url('космическая-туманность.jpg');

  background-attachment: fixed;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

}

Как это работает? Браузер фиксирует фоновое изображение относительно окна просмотра, а не элемента. Когда пользователь скроллит, содержимое двигается, а фон остаётся на месте — получается иллюзия параллакса. Простейший эффект готов за пять минут!

Но есть нюансы (куда же без них). Во-первых, background-attachment: fixed плохо работает на iOS — Apple решила, что это слишком ресурсоёмко для мобильных устройств. Во-вторых, эффект получается довольно примитивным — подходит только для простых фонов. В-третьих, нет контроля над скоростью — параллакс работает в одном режиме.

Расширенный метод с perspective и translateZ

А вот теперь переходим к настоящей магии — методу, который заставляет CSS работать в трёх измерениях, словно мы внезапно открыли портал в мир виртуальной реальности. Здесь используются 3D-трансформации: perspective, transform-style: preserve-3d и translateZ — арсенал, который превращает плоскую страницу в многослойное пространство.

Алгоритм создания такого параллакса:

1. Создаём контейнер с перспективой — устанавливаем точку наблюдения.
2. Включаем прокрутку через overflow-y: auto.
3. Размещаем слои с разным смещением по оси Z.
4. Компенсируем масштаб — иначе удалённые объекты станут крошечными.

<div class=»parallax-container»>

  <div class=»parallax-layer parallax-bg»>

    <img src=»задний-план.jpg» alt=»Фон»>

  </div>

  <div class=»parallax-layer parallax-text»>

    <h1>Сад изящных слов</h1>

  </div>

</div>

.parallax-container {

  perspective: 1px;

  height: 100vh;

  overflow-y: auto;

  transform-style: preserve-3d;

}

.parallax-layer {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

}

.parallax-bg {

  transform: translateZ(-1px) scale(2);

}

.parallax-text {

  transform: translateZ(-0.5px) scale(1.5);

}

Ключевое свойство здесь — perspective: 1px. Оно создаёт виртуальную точку наблюдения на расстоянии 1 пикселя от экрана. Чем больше значение perspective, тем меньше эффект глубины (и наоборот). Один пиксель даёт максимально выраженный параллакс.

Элементы со свойством translateZ(-1px) уходят «вглубь экрана» и начинают двигаться медленнее при прокрутке. Но есть побочный эффект — они визуально уменьшаются! Для компенсации используем scale() по формуле:

scale = 1 + (translateZ × -1) / perspective

Для нашего примера с translateZ(-1px) и perspective: 1px: scale = 1 + (-1 × -1) / 1 = 2

Поэтому фон увеличиваем в 2 раза, а текст с translateZ(-0.5px) — в 1.5 раза. Математика в действии — элементы возвращаются к исходному размеру, но получают разную скорость движения при прокрутке!

Реализация параллакса на JavaScript

Параллакс при скролле

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

Простейший параллакс на скролле выглядит обманчиво невинно:

window.addEventListener('scroll', function() {

  const scrolled = window.pageYOffset;

  const parallaxElement = document.querySelector('.parallax-bg');

  const speed = 0.5; // Коэффициент скорости

 

  parallaxElement.style.transform =

    `translateY(${scrolled * speed}px)`;

});

Этот код говорит браузеру: «При каждой прокрутке бери текущую позицию скролла, умножай на коэффициент скорости и сдвигай элемент». Коэффициент 0.5 означает, что элемент будет двигаться в два раза медленнее основного контента — классический параллакс-эффект.

Но вот тут начинаются подводные камни размером с Титаник. Событие scroll срабатывает безумно часто — до 100 раз в секунду при быстрой прокрутке. Каждый раз браузер пересчитывает позицию, применяет трансформацию и перерисовывает страницу. На слабых устройствах это превращается в слайд-шоу из ада.

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

Параллакс при движении мыши

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

Логика следующая: получаем координаты курсора, вычисляем его положение относительно центра элемента-контейнера, и на основе этого смещаем слои в разные стороны с разной интенсивностью.

const parallaxContainer = document.querySelector('.parallax-container');

const layers = document.querySelectorAll('.parallax-layer');

parallaxContainer.addEventListener('mousemove', function(e) {

  const rect = parallaxContainer.getBoundingClientRect();

  const centerX = rect.left + rect.width / 2;

  const centerY = rect.top + rect.height / 2;

 

  const mouseX = e.clientX - centerX;

  const mouseY = e.clientY - centerY;

 

  layers.forEach((layer, index) => {

    const speed = (index + 1) * 0.05; // Разная скорость для слоёв

    const x = mouseX * speed;

    const y = mouseY * speed;

   

    layer.style.transform = `translate(${x}px, ${y}px)`;

  });

});

Ключевой момент — координаты считаем относительно центра контейнера (centerX, centerY), а не относительно всего окна. Так параллакс работает точно и предсказуемо. Разные слои получают разные коэффициенты скорости — создаётся иллюзия глубины, где «близкие» элементы реагируют сильнее, а «дальние» движутся едва заметно.

Для полировки эффекта добавляем CSS-переходы:

.parallax-layer {

  transition: transform 0.3s ease-out;

}

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

Управление скоростью слоёв через data-атрибуты

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

HTML Academy и Skillbox рекомендуют управлять скоростью прямо в разметке, а Hexlet показывает такой же подход в примерах кода.

Пример:

<div class=»parallax»>

  <div class=»parallax__inner»>

    <h1 class=»parallax__layer title» data-speed=»0.03″>

      Здорово быть енотом!

    </h1>

    <button class=»parallax__layer button» type=»button» data-speed=»0.05″>

      Стать енотом

    </button>

    <div class=»parallax__layer circle» data-speed=»0.15″></div>

  </div>

</div>

layers.forEach((layer) => {

  const speed = layer.dataset.speed;

  const x = (coordX * speed).toFixed(2);

  const y = (coordY * speed).toFixed(2);

  layer.style.transform = `translate(${x}px, ${y}px)`;

});

Это даёт возможность легко регулировать глубину каждого слоя: «ближние» элементы реагируют сильнее, а «дальние» — едва заметно.

Расширения и вариации (Particle Parallax и др.)

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

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

class Particle {

  constructor(x, y, layer, color, size) {

    this.x = x;

    this.y = y;

    this.layer = layer; // "глубина" частицы (1-4)

    this.speed = layer * 0.5; // чем глубже, тем быстрее

    this.color = color;

    this.size = size;

    this.blur = layer > 2 ? 2 : 0; // дальние частицы размыты

  }

 

  move(direction) {

    this.y += this.speed * direction;

    // Если частица ушла за экран, возвращаем её в начало

    if (this.y > window.innerHeight + 100) {

      this.y = -100;

    }

  }

}

// Создаём коллекцию частиц

const particles = [

  new Particle(200, 100, 3, '#FF7019', 8),

  new Particle(800, 300, 1, '#FF7019', 12),

  new Particle(1200, 600, 4, '#FF7019', 6),

  // ... и так далее

];

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

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

Производительность и оптимизация

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

CSS-параллакс в этом плане — настоящий подарок судьбы. Браузеры оптимизируют CSS-трансформации на уровне железа, используя GPU и аппаратное ускорение. Результат: плавная анимация даже на относительно слабых устройствах. Единственное ограничение — iOS Safari, который Apple принципиально заставляет тормозить при использовании background-attachment: fixed (видимо, чтобы пользователи не забывали, что они держат в руках мобильное устройство, а не игровую консоль).

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

Диаграмма показывает, что CSS-параллакс задействует преимущественно GPU, обеспечивая плавную анимацию, тогда как JavaScript сильнее нагружает CPU и требует оптимизаций.

Основные техники оптимизации JavaScript-параллакса:

• RequestAnimationFrame — синхронизирует анимацию с частотой обновления экрана (обычно 60 FPS).
• Throttle и debounce — ограничивают частоту выполнения функций.
• Transform вместо изменения позиции — используйте translateX/Y вместо left/top.
• Will-change — предупреждает браузер о будущих изменениях элемента.
• Виртуализация — рендерите только видимые элементы.

Сравнение нагрузки CSS и JavaScript-параллакса на GPU и CPU. CSS использует аппаратное ускорение, тогда как JavaScript сильнее нагружает процессор.

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

Когда использовать параллакс, а когда лучше отказаться

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

Идеальные сценарии для параллакса:

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

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

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

Когда параллакс противопоказан:

Корпоративные сайты и B2B-платформы — здесь пользователи приходят за информацией, а не за развлечениями. Менеджер по закупкам, который ищет поставщика металлопроката, вряд ли оценит летающие частицы и плавающие элементы. Более того, излишняя «красивость» может снизить доверие к компании.

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

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

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

Заключение

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

• Параллакс создаёт эффект глубины. Он повышает вовлечённость пользователей и улучшает визуальное восприятие.
• CSS-параллакс проще и быстрее. Он оптимизирован для большинства устройств и подходит для лёгких эффектов.
• JavaScript-параллакс гибче. Позволяет создавать сложные анимации и динамические сцены.
• Оптимизация критична. Без requestAnimationFrame и других приёмов анимация может вызывать торможения.
• Используйте параллакс осознанно. Эффект уместен для лендингов, портфолио и промо-страниц, но не подходит для информационных порталов.

Рекомендуем обратить внимание на подборку курсов по веб-разработке. Если вы только начинаете осваивать профессию, эти программы помогут быстро разобраться в CSS и JavaScript-анимациях. В курсах есть как теоретическая, так и практическая часть, что позволяет применить знания сразу в проектах.