Параллакс - это эффект, при котором разные части страницы прокручиваются с разной скоростью, поэтому фон дрейфует медленнее, чем передний план, и раздел приобретает ощущение глубины. Расширение RELLAX в Мастер Аддоны Про добавляет, что Элементор параллаксная прокрутка эффект для виджетов, таких как изображение или заголовок, с помощью библиотеки Rellax.js, не касаясь строки JavaScript. он отображается в виде раздела на вкладке элемента "Дополнительно", с элементами управления скоростью, процентом движения, z-индексом и направлением.
Вот где живет Реллакс, чем занимается каждый сеттинг, и как выглядит эффект, когда страница находится в прямом эфире.
Что делает расширение Rellax #
Реллакс привязывает анимацию на основе прокрутки к тому элементу, который вы выберете. по мере прокрутки посетителя этот элемент движется быстрее или медленнее, чем остальная часть страницы, в зависимости от скорости, которую вы установили. Направьте его на изображение героя, и фон скользит; укажите его в заголовке, и текст будет парить впереди всего вокруг него. Поскольку он работает на элемент, вы можете смешать пару разных скоростей в одном и том же разделе и построить многослойный свиток без специального плагина параллакса.
Подумайте об этом как о двоюродном брате двух других инструментов движения Master Addons, основанном на свитках: Плавающие эффекты, который оживляет элемент сам по себе без прокрутки, и Преобразует, ручки которого вращаются, масштабируются и перекосываются.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер Аддоны Про установлен с активной лицензией, так как Rellax является расширением Pro. Если вы еще не установили его, следуйте руководство установки.
- Расширение Rellax включено на панели параметров главных надстроек.
- Виджет для анимации, такой как изображение, значок или Градиентный заголовок. Rellax перемещает весь виджет, а не фоновое изображение раздела.
Как добавить эффект параллакса в Элементоре #
Выберите элемент, который хотите переместить. Откройте Продвинутый вставьте вкладку на панель Элементор и прокрутите вниз до Реллакс раздел (на нем имеется фиолетовый значок Master Addons). Разверните его и переверните Включил Rellax чтобы Да. Этот переключатель является переключателем для всего эффекта, поэтому ничего не происходит, пока он не включен.
Одна вещь, которая сбивает людей с толку: параллакс работает только на живой странице или в предварительном просмотре, никогда, пока вы редактируете на холсте. Так что не ждите, пока элемент переместится внутрь редактора, нажмите предварительный просмотр, чтобы увидеть его.
Объяснены настройки Rellax #
При включенном режиме Enable Rellax остальные элементы управления определяют ход движения элемента:
- Скорость: как быстро элемент движется относительно прокрутки. более высокие положительные числа заставляют его двигаться вверх быстрее, когда вы прокручиваете вниз; отрицательные числа толкают его в другую сторону. демо использует 6. Начните примерно с 4 до 6 и отрегулируйте дальше, поскольку большие значения могут вытолкнуть элемент из его сечения.
- Процент: отправная точка анимации, от 0 до 1, в зависимости от того, где элемент находится в окне просмотра. Демо устанавливает его в 0,4. Подталкивайте это, когда эффект проявляется слишком рано или слишком поздно.
- Z-индекс: порядок укладки, та же идея, что и CSS z-индекс. Поднять его (демо использует 3) когда элемент параллакса должен располагаться над или под соседом, он перекрывается в середине прокрутки.
- Вертикальный: перемещайте элемент вверх и вниз по мере прокрутки страницы Это обычное направление параллакса.
- Горизонтальный: вместо этого переместите элемент влево и вправо. Удобно для элементов, в которые вы хотите вставить сбоку.
Скорость и Процент оба имеют отзывчивый значок рядом с ними, поэтому вы можете установить различные значения для рабочего стола, планшета, и мобильного.Это имеет большее значение, чем звучит Скорость, которая выглядит отлично на широком рабочем столе может чувствовать раздражение на телефоне, где экран короткий и элемент покрывает много земли в небольшом пространстве Набор мобильной скорости вниз, как правило, является исправлением.
См. эффект параллакса на странице в реальном времени #
Опубликовать страницу (или открыть предварительный просмотр) и прокрутить. элемент, который вы включили Rellax на ходах в своем собственном темпе, в то время как остальная часть страницы прокручивается нормально, и эта разница скоростей - это то, что продает глубину. Вот демо-герой, с параллаксным изображением прокручивается против заголовка “Scroll UP”:
Если движение кажется слишком сильным или слишком тонким, вернитесь к управлению Скоростью и настройте его. Параллакс - один из тех эффектов, где небольшое число обычно читается лучше, чем большое.
Обычные случаи использования #
- Изображения героев: придайте виджету изображения герою целевой страницы медленный дрейф, чтобы раздел чувствовал себя живым в тот момент, когда кто-то прокручивает.
- Плавающие заголовки: поместите Rellax в курс так, чтобы он поднимался впереди содержимого под ним.
- Слоистые разделы: установите два или три элемента на разные скорости в одном и том же разделе для многослойной многоглубинной прокрутки.
- Вызовы функций: вставьте значок или значок горизонтально, когда посетитель достигнет его.
- Страницы рассказывания историй: используйте нежный параллакс между блоками, чтобы длинный свиток не казался плоским.
Для движения, не связанного с прокруткой, соедините Реллакс с Входная анимация таким образом, элементы оживляют по мере их появления, а затем продолжают двигаться с параллаксом, пока свиток продолжается. Просмотрите все виджеты и расширения список, чтобы увидеть остальную часть набора инструментов движения.
Видео Учебник #
Предпочитаете смотреть? это видео проходит через расширение Rellax от конца до конца, от включения его на элементе до прокрутки параллакса на странице в реальном времени:
Часто задаваемые вопросы #
Как добавить эффект параллаксной прокрутки в Elementor?
Выберите элемент, откройте вкладку Расширенный, разверните раздел Главные дополнения Rellax, и установите Включенный Rellax на Да. Затем установите Скорость и Процент. элемент прокручивается в своем собственном темпе на живой странице, код не требуется.
Почему я не вижу эффекта параллакса в редакторе "Элементора"?
Реллакс работает только на переднем конце. элемент сидит неподвижно, пока вы редактируете на холсте, поэтому откройте предварительный просмотр или просмотрите опубликованную страницу, чтобы увидеть движение параллакса.
Что делает настройка Скорость в Rellax?
Скорость контролирует, как быстро элемент движется по сравнению со прокруткой страницы. более высокие положительные значения перемещают его вверх быстрее, когда вы прокручиваете вниз, а отрицательные значения меняют направление. значения около 4 до 6 хорошо работают для большинства разделов героя.
Могу ли я использовать другую скорость параллакса на мобильном телефоне?
Да. элементы управления скоростью и процентом отзывчивы, поэтому вы можете устанавливать отдельные значения для настольных компьютеров, планшетов и мобильных устройств. Снижение скорости на мобильных устройствах предотвращает ощущение слишком агрессивности эффекта на небольших экранах.
Замедляет ли расширение Rellax мой сайт?
Реллакс запускает анимацию на основе прокрутки для каждого элемента, поэтому воздействие остается небольшим. Примените его только к элементам, которые в нем нуждаются, а не к каждому блоку на странице, и все останется гладко.
Завершая #
Расширение Rellax - самый быстрый способ добавить Элементор параллаксная прокрутка эффект без отдельного плагина или пользовательского кода. включите его на любой элемент, установите скорость, процент, z-индекс и направление, и элемент прокручивается с реальной глубиной на живой странице. чтобы узнать больше о способах перемещения вещей по экрану, взгляните на Преобразует и Плавающие эффектыи посмотрите Страница расширения параллакса Rellax для сравнения с эффектами движения Elementor Pro.
