Эффект параллакс на сайте: что это и как добавить

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

Название пришло из астрономии: параллакс — это видимое смещение объекта относительно фона при изменении точки наблюдения.

Как работает параллакс технически

Параллакс реализуется через несколько методов: CSS background-attachment: fixed (самый простой, фон не двигается), CSS transform + JavaScript (гибкий контроль скорости), CSS perspective и translateZ (чистый CSS). В конструкторах — через визуальный интерфейс без кода.

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

CSS-свойство background-attachment: fixed — самый простой способ, фон не двигается при прокрутке
CSS transform + JavaScript — более гибкий контроль скорости для каждого элемента
CSS perspective и translateZ — чистый CSS-параллакс без JS
Библиотеки — GSAP ScrollTrigger, Rellax, Locomotive Scroll

В конструкторах (Taptop, Tilda Zero Block) параллакс реализуется через визуальный интерфейс без написания кода.

Виды параллакс-эффектов

Четыре вида: фоновый (фон движется медленнее контента — классика), многослойный (несколько элементов с разными скоростями), по оси X (горизонтальное смещение при вертикальной прокрутке), 3D от мыши (реакция на курсор — только десктоп).

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

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

Параллакс по оси X. Элементы сдвигаются горизонтально при вертикальной прокрутке. Нестандартно, требует правильного исполнения.

3D-параллакс от мыши. Элементы реагируют на движение курсора — создаёт ощущение объёма. Работает только на десктопе.

Когда параллакс уместен

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

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

Hero-секция. Небольшой параллакс на фоновом изображении добавляет «жизни» без перегрузки.

Презентационные сайты. Продукты, мероприятия, лонгриды — где медленный контролируемый скролл — часть нарратива.

Когда параллакс вреден

Параллакс вреден на мобильных (background-attachment: fixed не работает в iOS), на слабых устройствах (подтормаживания), для пользователей с вестибулярными расстройствами (поддерживайте prefers-reduced-motion), и на контентных сайтах — замедляет чтение.

Мобильные устройства. background-attachment: fixed не работает в iOS Safari — фон рендерится без параллакса или ломается. Всегда отключайте параллакс на мобильном.

Слабые устройства. Перерасчёт позиций при каждом шаге прокрутки — ресурсоёмкая операция. На старых Android-устройствах это вызывает подтормаживания.

Вестибулярные расстройства. Часть пользователей испытывает дискомфорт от анимации движения. Поддерживайте prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  .parallax {
    background-attachment: scroll;
  }
}

Новостные и контентные сайты. Параллакс замедляет чтение и отвлекает от контента. Здесь он не нужен.

Как добавить параллакс в Taptop

В Taptop эффект параллакса собирается с помощью анимации по скроллу с эффектом «Движение».

Taptop не имеет отдельной настройки «параллакс» — эффект создается следующим образом: на изображение на фоне добавляется анимация «Трансформация по скроллу» с эффектом «Движение» по оси Y. Ключевой нюанс — триггерным элементом анимации нужно указать не текущую, а следующую секцию, иначе эффект сработает некорректно.

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

Производительность и Core Web Vitals

Параллакс влияет на CLS и FPS при прокрутке. Оптимизация: используйте will-change: transform для параллакс-элементов, не применяйте к текстовым блокам. Рекомендуемый FPS при прокрутке — 60fps; если ниже 30fps из-за параллакса — упростите эффект.

Параллакс может негативно влиять на CLS (Cumulative Layout Shift) и FPS при прокрутке:

Используйте will-change: transform для параллакс-элементов — браузер оптимизирует рендеринг
Не применяйте параллакс к текстовым блокам — ухудшает читаемость
Проверяйте FPS через Chrome DevTools → Performance → Framerates

Рекомендуемый FPS при прокрутке: 60fps. Если падает ниже 30fps из-за параллакса — упростите эффект.

Лучшие практики

Правила безопасного параллакса: 1–2 элемента на страницу, коэффициент смещения ≤ 0.3, всегда отключать на мобильных, поддерживать prefers-reduced-motion, тестировать на реальных устройствах. Один деликатный параллакс работает лучше пяти агрессивных.

Один-два параллакс-элемента на страницу — достаточно
Коэффициент смещения ≤ 0.3 — деликатно и без дискомфорта
Всегда отключайте на мобильных
Поддерживайте prefers-reduced-motion
Тестируйте на реальных устройствах, не только в Chrome DevTools

Итог

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

В Taptop параллакс настраивается без кода — попробуйте на своём следующем проекте на taptop.pro.

FAQ

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

Вопрос: Как параллакс влияет на скорость сайта?
Ответ: Параллакс может снижать FPS при прокрутке и влиять на CLS (Core Web Vitals). Минимизация нагрузки: используйте will-change: transform, не применяйте к текстовым блокам, ограничьте 1–2 элементами на страницу. Проверяйте FPS через Chrome DevTools → Performance.

Вопрос: Работает ли параллакс на мобильных устройствах?
Ответ: Не всегда. CSS background-attachment: fixed не поддерживается в iOS Safari — фон рендерится статично. JavaScript-параллакс работает, но медленнее на слабых устройствах. Стандартная практика — отключать параллакс на мобильных брейкпоинтах.

Вопрос: Как добавить параллакс в конструктор без кода?
Ответ: В Taptop: выберите секцию или элемент → откройте панель «Анимации» → «При прокрутке» → «Смещение» → задайте коэффициент 0.1–0.3. Для мобильного — переключитесь на мобильный брейкпоинт и отключите анимацию отдельно.

Вопрос: Чем параллакс отличается от обычной анимации?
Ответ: Параллакс — анимация, привязанная к позиции прокрутки: элементы движутся непрерывно в зависимости от scroll-позиции. Обычная анимация запускается по триггеру (загрузка, клик, наведение). Параллакс создаёт постоянную интерактивность, обычная анимация — разовое событие.