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

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

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

💡 Быстрый обзор:

• Разберитесь, как работает параллакс-прокрутка и зачем она нужна вашему сайту
• Оцените риски: мобильная производительность, доступность, выбор фонов
• Выберите тему со встроенным параллаксом или подключите Slider Revolution для слайдеров
• Поставьте бесплатный плагин Advanced WordPress Backgrounds (AWB), универсальное решение для Gutenberg, Classic Editor и WPBakery

Что такое эффект параллакса

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

Приём перекочевал в веб-дизайн из игровой индустрии, там параллакс использовали годами для фоновых слоёв в платформерах. Сегодня это стандартная фича премиум-тем, page builder'ов и отдельных плагинов. Даже бесплатная тема Twenty Seventeen, поставлявшаяся с WordPress по умолчанию, имела встроенный параллакс.

Современный веб-дизайн пошёл дальше: CSS-свойство scroll-timeline позволяет делать параллакс вообще без JavaScript, на чистой анимации, привязанной к прогрессу скролла. Но для быстрого внедрения на продакшен-сайте плагины и конструкторы по-прежнему практичнее.

На видео выше, полное руководство по добавлению параллакса в WordPress (EN, 12 минут). Автор показывает установку, настройку скорости, отключение на мобильных и работу с фоновыми изображениями в реальном времени.

Зачем использовать параллакс на сайте

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

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

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

Что учесть перед внедрением параллакса

У медали две стороны. Вот что стоит держать в голове до того, как добавлять параллакс-секции.

Выбор фонового изображения

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

Для фотографий, только высокое разрешение. Размытый или пиксельный фон на весь экран убивает профессиональный вид. Подборку стоковых сайтов с бесплатными и премиальными фото мы собрали в отдельном обзоре 35 фотостоков.

Параллакс на мобильных устройствах

На телефонах и планшетах параллакс работает нестабильно. Жестовый скролл (свайп) отличается от колёсика мыши, эффект может дёргаться, подвисать или не отображаться вовсе. Большинство современных плагинов и тем позволяют отключить параллакс для мобильных одной галочкой, и это лучший вариант с точки зрения UX.

Доступность (accessibility)

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

Выбор темы со встроенным параллаксом

Тем, кто начинает проект с нуля, проще всего взять тему с уже встроенным параллаксом. Большинство премиум-тем для WordPress включают эту функцию как минимум для домашней страницы. Если нужен параллакс на разных страницах сайта, смотрите в сторону мультицелевых тем с продвинутым конструктором.

Три проверенных варианта:

• Divi от Elegant Themes, визуальный конструктор со встроенной опцией параллакс-фона для любой секции;
• Ultra от Themify, мультицелевая тема с конструктором Themify Builder и гибкими настройками параллакса;
• Total от WPExplorer, мультицелевая тема на базе WPBakery с продвинутыми опциями параллакса (скорость, направление, отключение на мобильных).

Добавление параллакс-фона в Total (WPBakery)

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

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

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

В расширенных настройках параллакса можно включить или отключить эффект на мобильных устройствах, выбрать стиль изображения (cover, fixed, repeat), направление движения и точную скорость.

Для контраста между фоном и содержимым используйте вкладку «Overlay», например, полупрозрачную белую заливку поверх изображения. Сохраните изменения строки и страницы.

Параллакс-слайдеры со Slider Revolution

Когда нужен не статичный фон, а целый слайдер с эффектом параллакса, лучший инструмент это Slider Revolution. Премиум-плагин включает сотни опций: шрифты, слои, эффекты переходов, макеты и, конечно, многоуровневый параллакс. Подробное руководство по Slider Revolution, в отдельной статье.

Как включить параллакс в Slider Revolution

Установите плагин и либо импортируйте готовый шаблон слайдера, либо создайте слайдер с нуля.

Отредактируйте основной фон слайда: добавьте исходное изображение и перейдите на вкладку «Parallax / 3D», чтобы назначить уровень параллакса. Затем при добавлении слоёв (текст, изображения, кнопки) выберите опцию Parallax / 3D для каждого слоя, глубина параллакса оживит элементы независимо друг от друга.

Готовый слайдер вставляется шорткодом в любую запись или страницу. Если вы используете WPBakery, просто перетащите элемент Slider Revolution на страницу и выберите слайдер из выпадающего списка.

Бесплатный плагин Advanced WordPress Backgrounds (AWB)

Если тема уже стоит и не поддерживает параллакс, не обязательно её менять. Advanced WordPress Backgrounds (AWB), бесплатный плагин из официального каталога WordPress.org, который добавляет параллакс-фон к любому элементу страницы: блоку, заголовку или целой секции. Плагин активно развивается: последнее обновление, июнь 2026, совместимость с WordPress 7.0 подтверждена.

AWB поддерживает три типа фона: цветной, изображение и видео (YouTube/Vimeo/собственный хостинг). Работает с Gutenberg, Classic Editor и WPBakery.

Установка AWB

Зайдите в админку WordPress: Плагины → Добавить новый. В поиске наберите «Advanced WordPress Backgrounds», нажмите Установить → Активировать.

Способ добавления фона зависит от редактора. Согласно описанию плагина на WordPress.org, в любом из трёх редакторов доступны: тип фона (цвет, изображение или видео), размер отображения (cover, contain или pattern), позиция фона с процентами, оверлей с выбором цвета и прозрачностью через Alpha-селектор, параллакс-прокрутка с настройкой скорости, масштабирование и прозрачность, а также мышиный параллакс (фон слегка смещается за курсором).

В меню Настройки → AWB находится вкладка с глобальными параметрами. Здесь можно отключить эффекты параллакса и видео для мобильных устройств и конкретных браузеров.

AWB в Gutenberg

AWB полностью совместим с блочным редактором и предоставляет собственный блок.

Вставьте блок AWB, затем добавьте внутрь любые другие блоки с вашим контентом.

Кликните по блоку AWB и перейдите на вкладку «Block» в правой панели. Здесь настраиваются все параметры фона: тип, изображение, параллакс, оверлей.

AWB в Classic Editor

В классическом редакторе AWB работает через шорткод. Выделите текст, для которого нужен параллакс-фон, и нажмите иконку AWB в панели редактора.

Выберите фоновое изображение и настройте остальные параметры: цвет оверлея, тип параллакса, скорость. Нажмите «Вставить».

Шорткод выглядит примерно так:

1
[nk_awb awb_type="image" awb_image="1234" awb_image_size="full" awb_image_background_size="cover" awb_image_background_position="50% 50%" awb_parallax="scroll" awb_parallax_speed="0.5"]Ваш контент внутри параллакс-фона[/nk_awb]

Минус шорткод-подхода, настройки фона не видны в визуальном редакторе, приходится править код вручную. Для комфортной работы лучше использовать Gutenberg или WPBakery.

AWB с WPBakery

С WPBakery интеграция максимально простая. В настройках любой строки появляется дополнительная вкладка «Backgrounds (AWB)», где можно создать и настроить параллакс-фон без шорткодов, всё визуально.

⁉️🤔 Частые вопросы

Обязательно ли менять тему ради параллакса?

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

Параллакс замедляет сайт?

При аккуратной настройке, незначительно. AWB использует легковесную библиотеку Jarallax (без jQuery с версии 1.11), а современные браузеры оптимизируют transform на GPU. Основной фактор торможения, слишком тяжёлое фоновое изображение. Оптимизируйте фото до WebP или AVIF, держите размер в пределах 200-300 КБ, и скорость не пострадает.

Работает ли параллакс на айфонах и Android?

Зависит от реализации. На iOS веб-параллакс традиционно проблемный: фиксированный фон (background-attachment: fixed) игнорируется Safari. Плагин AWB решает это через JavaScript-анимацию, работает стабильно. Но лучшая практика для мобильных, отключить параллакс вовсе (галочка в настройках AWB или темы): на маленьком экране эффект едва заметен, а ресурс батареи экономится.

Можно ли сделать параллакс вообще без плагинов?

Можно. CSS-свойство animation-timeline: scroll() позволяет привязать параллакс-анимацию к прогрессу скролла без единой строки JavaScript. Однако поддержка браузерами всё ещё неполная (Safari включил в 2024, Firefox с 2025). Для совместимости с более старыми браузерами плагин пока надёжнее.

Чем AWB лучше других бесплатных параллакс-плагинов?

AWB выделяется тремя вещами: во-первых, поддержка трёх редакторов (Gutenberg, Classic, WPBakery) без конфликтов; во-вторых, регулярные обновления, плагин тестируется вплоть до WordPress 7.0; в-третьих, мышиный параллакс и видео-фон в бесплатной версии, у конкурентов это часто Pro-фичи.

Нужен ли параллакс для SEO?

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

Какой инструмент выбрать под вашу задачу

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

Если тема без параллакса, AWB закрывает большинство типовых сценариев бесплатно: Быстрая установка, интуитивный интерфейс, работа с Gutenberg и WPBakery, глобальное отключение на мобильных. Для слайдеров с многослойным параллаксом, Slider Revolution, вне конкуренции по гибкости анимации.

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