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

Реализовать параллакс на WordPress вручную непросто. CSS-приём background-attachment: fixed ломается на iOS, JS-библиотеки вроде Jarallax или Rellax требуют кастомизации под тему, ошибки в z-index или overflow рушат вёрстку. Параллакс-плагины решают эту боль: визуальные настройки скорости и направления, поддержка видеофона, адаптация под мобильные устройства.

Мы отобрали четыре плагина для разных сценариев: от легковесного параллакса одного изображения до конструктора фонов с YouTube-видео и мышью-параллаксом. Все четыре совместимы с актуальными версиями WordPress и Gutenberg.

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

• Определите сценарий использования: герой-секция на всю ширину с видеофоном, одиночное изображение в теле поста или слайдер с эффектом глубины.
• Выберите плагин под ваш редактор: для Gutenberg с максимумом возможностей берите Advanced WordPress Backgrounds, для Elementor-сайтов оптимален Element Pack Lite, для классического редактора подойдёт шорткод [dd-parallax] от Parallax Image.
• Проверьте совместимость с вашей темой и создателем страниц перед установкой, чтобы параллакс-эффекты корректно работали с существующей вёрсткой.

Сравнительная таблица плагинов

1. Advanced WordPress Backgrounds: максимум эффектов и видеофон

Advanced WordPress Backgrounds (AWB), самый функциональный параллакс-плагин в этой подборке. Он добавляет в Gutenberg блок Background (AWB), внутри которого размещаете любой контент, а в настройках блока задаёте фон: цвет, изображение, featured image поста, паттерн, self-hosted видео или YouTube/Vimeo-ролик. Для каждого типа фона включается параллакс на базе высокопроизводительной JS-библиотеки Jarallax.

Параллакс-эффектов здесь шесть: классический скролл, scale (масштабирование при прокрутке), opacity (изменение прозрачности), scroll+scale, scroll+opacity и мышь-параллакс, когда фон смещается за курсором. Скорость эффекта регулируется ползунком. Отдельная настройка включает или отключает параллакс на мобильных, важно, потому что background-attachment: fixed на iOS работает нестабильно.

Плагин поддерживает srcset для адаптивных изображений. Оверлей с прозрачностью и цветом затемняет фон под читаемый текст. Custom CSS-отступы дают точный контроль над позиционированием блока.

На практике AWB закрывает задачи лендингов с видеофонами, hero-секций с YouTube-роликами, блоков с мышью-параллаксом. Для одиночного изображения в теле поста может быть избыточен.

• Плюсы: 6 типов параллакс-эффектов включая мышь-параллакс, видеофон (YouTube, Vimeo, self-hosted) с настройкой start/end времени, Gutenberg-блок из коробки + WPBakery Page Builder, регулярные обновления (v1.12.11, июнь 2026), совместимость с WordPress 7.0
• Минусы: видеофон на мобильных не отключается автоматически (только ручная настройка), избыточен для одного простого изображения
• Цена: Бесплатно, без Pro-версии

🔗 Advanced WordPress Backgrounds на WordPress.org

2. Parallax Image: один шорткод для одного изображения

Если AWB, швейцарский нож, то Parallax Image, скальпель. Плагин делает ровно одну вещь: вставляет полноширинное изображение с параллакс-эффектом через шорткод [dd-parallax]. Под капотом parallax.js от pixelcog, лёгкий скрипт без jQuery-зависимостей.

Шорткод поддерживает шесть параметров: img (имя файла из медиабиблиотеки или URL), height (высота окна в пикселях), speed (скорость от 0 до 10, где 0 = статика, 10 = максимальное смещение), z-index, mobile (отдельное изображение для мобильных), offset (растягивание на всю ширину). Текст между открывающим и закрывающим тегом выводится поверх параллакс-фона, удобно для hero-секций с заголовком и кнопкой.

Плагин тестировался с классическими темами WordPress (Twenty Fourteen, Twenty Seventeen) и Bootstrap-темами. С современными блочными темами работает, но кнопка TinyMCE доступна только в классическом редакторе. Gutenberg-виджета разработчик так и не выпустил.

Последнее обновление было в ноябре 2024 (v1.9.1, исправления CVE). Плагин не тестировался с тремя последними мажорными версиями WordPress формально, но на практике простой шорткод с parallax.js продолжает работать стабильно.

На практике Parallax Image подходит для классических тем без блочного редактора, когда нужно быстро прикрутить одно параллакс-изображение через шорткод.

• Плюсы: предельно простой (один шорткод, один параллакс), лёгкий скрипт parallax.js без jQuery-зависимостей, отдельное изображение для мобильных через параметр mobile
• Минусы: только классический редактор (нет Gutenberg-блока), не обновлялся функционально с 2024 года, только изображения (без видеофона)
• Цена: Бесплатно

🔗 Parallax Image на WordPress.org

3. Element Pack Lite: параллакс-виджеты для Elementor

Element Pack Lite, это не просто параллакс-плагин, а полноценный набор из 300+ виджетов и расширений для Elementor. Среди них два специализированных parallax-инструмента: Parallax Section (эффект параллакса для целой секции) и Parallax Background (параллакс-фон для отдельных блоков и колонок). Плюс Floating Effects и панель анимаций для тонкой настройки движения элементов.

Виджеты встраиваются в интерфейс Elementor: перетаскиваете нужный на холст, настраиваете скорость, направление и триггер (скролл или курсор). Для параллакс-секции задаётся фоновое изображение и behaviour: scroll, scale, opacity. Отдельно включается отключение на мобильных.

Бесплатная версия содержит 30+ виджетов, включая parallax-элементы. Для сайтов, которые уже используют Elementor, Element Pack Lite, естественный выбор: не требует отдельного плагина под параллакс, параллакс-виджеты работают в одном интерфейсе с сотней других инструментов.

На практике плагин оптимален для Elementor-сайтов, где параллакс, одна из многих задач, а не единственная. Если строите на Elementor, Element Pack Lite уже в списке must-have.

• Плюсы: два parallax-виджета + Floating Effects + анимации в одном плагине, 100 000+ активных установок, активная поддержка, совместимость с WordPress 7.0, последнее обновление июль 2026 (v8.7.6)
• Минусы: работает только с Elementor (не для Gutenberg и не для Classic Editor), 300+ виджетов могут показаться избыточными, если нужен только параллакс
• Цена: Бесплатно

🔗 Element Pack Lite на WordPress.org

4. Parallax Slider Block: слайдер с эффектом глубины

Parallax Slider Block решает узкую, но востребованную задачу: слайдер изображений с эффектом параллакса при скролле. Это нативный Gutenberg-блок. Устанавливаете плагин, добавляете блок Slider Block в редакторе, загружаете изображения.

В настройках блока задаётся: скорость параллакс-эффекта, высота слайдера (в пикселях или vh), отступы между слайдами, анимация перехода, responsive-контролы для мобильных. Добавлены опции кастомизации: тень, скругление углов, бордер, кастомный CSS. Типографика заголовков слайдов настраивается в реальном времени.

Плагин создан командой WPDeveloper, теми же разработчиками, что делают Essential Addons for Elementor (2+ млн установок) и NotificationX. Код лёгкий, ресурсы подгружаются только на страницах, где используется блок.

Последнее обновление было в июле 2024 (v1.2.7), формально плагин не тестировался с тремя последними версиями WordPress. На практике с WordPress 6.6 работает стабильно.

На практике Parallax Slider Block подходит для лендингов и портфолио, где нужен слайдер с эффектом глубины, а не статичный параллакс-фон.

• Плюсы: нативный Gutenberg-блок (поставил и пользуешься), лёгкий (без jQuery, ресурсы грузятся только где используется), команда WPDeveloper с хорошей репутацией
• Минусы: только слайдер (нет статичного параллакс-фона), последнее обновление июль 2024 (свежих фич нет), 1 000+ установок (аудитория скромнее, чем у других плагинов подборки)
• Цена: Бесплатно

🔗 Parallax Slider Block на WordPress.org

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

Лучше один раз увидеть, чем читать настройки. Видео от команды WP Royal Themes показывает пошаговую настройку parallax scrolling effect в WordPress: от установки плагина до финального результата на живом сайте.

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

Параллакс тормозит сайт?

Современные параллакс-плагины используют requestAnimationFrame и IntersectionObserver: эффект активируется только когда блок в зоне видимости. AWB на Jarallax и Parallax Image на parallax.js грузят менее 5 КБ gzip. Тормоза возникают, если поставить fullscreen-видеофон на дешёвом хостинге без кеширования. Здесь проблема не в параллаксе, а в видео.

Работает ли параллакс на iPhone?

iOS Safari исторически игнорирует background-attachment: fixed из-за особенностей рендеринга. Именно поэтому все плагины из подборки либо подменяют fixed на трансформации (AWB, Parallax Slider Block), либо предлагают отдельное статичное изображение для мобильных (Parallax Image через параметр mobile). Перед публикацией обязательно проверьте сайт на реальном iPhone.

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

Можно. Минимальный вариант: блок с background-image и background-attachment: fixed в Custom CSS. Но на мобильных это ломается. Более надёжный путь: подключить библиотеку Jarallax или rellax.js вручную и написать обвязку под свою тему. Для разработчика это норм, для контент-менеджера плагин сэкономит часы отладки.

Какой плагин выбрать для Gutenberg, а какой для Elementor?

Для Gutenberg: AWB (максимум возможностей) или Parallax Slider Block (только слайдер). Для Elementor: Element Pack Lite, потому что параллакс-виджеты встроены в интерфейс конструктора и не требуют переключения между плагинами. Parallax Image через шорткод работает в любом редакторе: универсальный fallback.

Что делать, если параллакс-фон не отображается?

Три частые причины: 1) конфликт z-index с другими элементами (поднимите значение в настройках плагина), 2) контейнер темы обрезает overflow (проверьте overflow: hidden у родительских блоков в инспекторе), 3) изображение не загружается (проверьте URL в консоли браузера). В AWB проблема часто решается включением опции Stretch.

Что выбрать под вашу задачу

Выбор зависит от сценария и инструментов.

• Если делаете лендинг или hero-секцию с видеофоном, берите Advanced WordPress Backgrounds. Это единственный плагин в подборке, который умеет YouTube/Vimeo-фон с параллаксом, да ещё и с настройкой времени старта и конца ролика.

• Если работаете в Elementor, Element Pack Lite уже у вас в списке must-have. Параллакс-виджеты идут в комплекте с сотней других полезных инструментов.

• Если нужен просто слайдер с эффектом глубины, Parallax Slider Block закрывает задачу без перегрузки сайта лишними библиотеками.

• Если у вас классическая тема без блочного редактора и нужно быстро прикрутить одно параллакс-изображение, шорткод [dd-parallax] от Parallax Image справится за пять минут.

Главное правило параллакса на WordPress: умеренность. Один, максимум два parallax-блока на страницу. Эффект должен подчёркивать контент, а не отвлекать от него. Правильно настроенный параллакс добавляет сайту глубины и премиальности. Три parallax-секции подряд превращают лендинг в аттракцион, из которого хочется уйти.