Статичний сайт виглядає пласким. Зображення й фон нерухомі, прокручування механічне, немає відчуття глибини. А хочеться, щоб шари зміщувалися один відносно одного, створюючи об’єм і залучаючи погляд. Паралакс робить саме це: фон рухається повільніше за передній план, породжуючи ілюзію тривимірного простору у вікні браузера.

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

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

💡 Швидкий огляд:

• Визначте сценарій використання: hero-секція на всю ширину з відеофоном, одиничне зображення в тілі допису або слайдер з ефектом глибини.
• Оберіть плагін під ваш редактор: для 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-секції поспіль перетворюють лендинг на атракціон, з якого хочеться піти.