Эффект параллакса Элементора с помощью Rellax.js (Pro)
Реллакс является Master Addons Pro расширение, которое приносит Rellax.js параллакс библиотека в Элементор, Включите его для элемента, установите Скорость от -10 до 10, и этот элемент прокручивается быстрее или медленнее, чем остальная часть страницы, что создает ощущение глубины, Вы можете установить другую скорость для планшета и мобильного, выбрать вертикальное или горизонтальное направление, и использовать Z-Index, чтобы держать движущиеся слои позади или перед вашим контентом. никакой загрузки кода или сценария не требуется.
Как добавить эффект параллаксной прокрутки в Elementor
Вам нужен Элементор и активный Мастер Аддоны Про лицензия.
- Перейти к Основные дополнения, расширения, включите Rellax и сохраните.
- Отредактируйте свою страницу с помощью Elementor и выберите виджет, который хотите переместить, например изображение, значок или фигуру.
- Откройте настройки Rellax для этого элемента и включите Включил Rellax.
- Установите скорость, например -2 для медленного дрейфа, и отрегулируйте ее для планшета и мобильного телефона.
- Выберите "Вертикальный" или "Горизонтальный" и установите Z-индекс, чтобы слой не покрывал ваш текст.
- Предварительный просмотр страницы и прокрутка для проверки движения.
Подробнее - в Настройки расширения Rellax.
Скорость, процент и направление
Скорость проходит от -10 до 10 с шагом 0.1 и может быть установлен на устройство Отрицательные значения заставляют элемент двигаться медленнее, чем страница, поэтому он чувствует себя дальше, а положительные значения перемещают его быстрее, поэтому он чувствует себя ближе. Процент (от 0 до 1) устанавливает место расположения элемента, когда начинается его движение, и Вертикальный и Горизонтальный варианты выбирают направление.
- Медленный дрейф от -1 до -2 для декоративных фигур позади героя.
- Небольшая положительная скорость для плавания значков перед контентом.
- Более низкая скорость или 0 на мобильном телефоне, если движение кажется слишком сильным на небольших экранах.
Слои с Z-Index
Слои параллакса могут скользить по тексту и кнопкам. Rellax добавляет Z-индекс настройка от -1 до 50, так что вы можете держать движущийся фоновый слой ниже вашего содержимого и форму переднего плана над ним.Rellax перемещает весь элемент, а не его фоновое изображение, поэтому поместите изображение, которое вы хотите переместить, в свой собственный виджет Изображение.
- Используйте -1 для слоев, которые должны располагаться позади содержимого.
- Держите заголовки и кнопки подальше от движущихся слоев.
- Перед публикацией проверьте свиток на реальном телефоне.
Эффекты движения Элементора против главных аддонов Реллакс
Элементор Про уже имеет Эффекты движения с прокруткой эффекты Вот как эти два сравниваются.
| Особенность | Эффекты движения Elementor Pro | Мастер Аддоны Реллакс |
|---|---|---|
| Цена | Нужен Элементор Про | Нужны главные дополнения Pro |
| Движение прокрутки | Вертикальная и горизонтальная прокрутка со скоростью и диапазоном смотровых площадок | Скорость Rellax.js от -10 до 10, вертикальная или горизонтальная |
| Другие эффекты прокрутки | Прозрачность, размытие, вращение и масштабирование | Нет, только движение |
| Эффекты мыши | Мышиная дорожка и 3D-наклон | Нет |
| Фоновый параллакс | Воздействие фонового движения на секции и контейнеры | Перемещает весь элемент |
| Настройки для каждого устройства | Выбирайте устройства, на которых работают эффекты | Скорость на устройство |
Если у вас уже есть Elementor Pro, Motion Effects охватывает больше типов эффектов.Rellax подходит для простых слоев, основанных на скорости, когда вы используете Master Addons Pro.О движении зацикливания, которое не зависит от прокрутки см Плавающие эффекты (Про).
Что такое Rellax.js?
Rellax.js - это небольшая библиотека JavaScript с открытым исходным кодом, созданная Диксоном и Мо, которая заставляет элементы двигаться с другой скоростью, пока страница прокручивается. На сайте с ручной кодировкой вы добавляете сценарий, даете элементам класс реллакса и задаете такие параметры, как скорость, процент, z-индекс и направление в коде.
Это расширение объединяет Rellax.js внутри Master Addons Pro и сопоставляет эти параметры с элементами управления Elementor, поэтому вы устанавливаете скорость, процент, Z-индекс и направление с панели. Скрипт загружается только на страницы, где элемент использует Rellax. Если вы не на Elementor, используйте библиотеку Rellax.js напрямую.
Часто задаваемые вопросы по поводу Реллакса
Сработает ли эффект параллакса на мобильный телефон?
Да. скорость можно установить отдельно для планшета и мобильного телефона, поэтому вы можете использовать меньшее значение или 0 на телефонах, если движение кажется слишком сильным Всегда тестируйте на реальном устройстве.
Могу ли я заставить фоновое изображение раздела двигаться?
Реллакс перемещает весь элемент, а не фоновое изображение. поместите изображение в собственный виджет "Изображение" позади вашего контента и добавьте Rellax в этот виджет или используйте эффекты фонового движения Elementor Pro для фона движущегося раздела.
Расширение Rellax бесплатное?
Нет, Реллакс является частью Мастер Аддоны Про. Сама библиотека Rellax.js бесплатна и имеет открытый исходный код, если вы добавите ее с собственным кодом.
Может ли слишком много эффектов параллакса замедлить мой сайт?
Они могут. каждый движущийся элемент заставляет браузер делать больше работы во время прокрутки. используйте параллакс на нескольких ключевых элементах на странице и сохраняйте скорость скромной.
Виджеты и расширения трендовых элементов
Создавайте сложные веб-сайты за меньшее время.
Стекломорфизм
Дополнительные контейнеры
Шаблоны
![Расширение Master Addons Post/Page Duplicator для Elementor: ссылка на строку MA Duplicator в списке WordPress Pages, создающая целевую страницу - [Дублированный № 128] черновик](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Дубликатор сообщений/страниц
