В настоящее время в сети есть множество отличных веб-сайтов с ужасными оптическими явлениями, прокручивающими анимацию везде, где фон движется быстрее, чем части переднего плана, чтобы передать глубину. Все, от строительных фирм и рекламных агентств, используют эту возможность для формирования портфелей и привлечения внимания общественности.
Влияние параллакса, вне всяких сомнений, впечатляет, и оно действительно может выделить ваш сайт среди остальных и придать ему продуманный вид. И вы сможете добавить эффект параллакса на свой сайт WordPress с помощью Элементор, не обладая достаточными профессиональными знаниями?
Параллакс действительно является неотъемлемой частью Elementor Pro, вы можете создать эффект параллакса в премиум-версии Elementor, и мы поговорим об этом сегодня. Кроме того, вы можете создавать красивые страницы с помощью этой функции в бесплатной версии Elementor.
Привилегии параллакса в том, что он выглядит действительно круто, а также может помочь при помолвке пользователя! Если у вас есть возможность провести A / B-тест, проверьте, может ли добавление основного эффекта параллакса на вашу веб-страницу снизить показатель отказов и увеличить среднее время нахождения на странице - оно того стоит. Доказано, что стратегическое использование параллакса направляет посетителей прямо на ваш призыв к действию. Движение эффекта параллакса привлекает внимание, а это означает, что аккуратно размещенная кнопка или форма могут повысить общий коэффициент конверсии.
Создавайте потрясающие сайты
С лучшим бесплатным конструктором страниц Elementor
Начать сейчасЭффект параллакса на элементе
Создавайте эффекты параллакса на вашей веб-странице еще никогда не было так легко. Нет спроса на специализированные темы WordPress, совместимые с параллаксом. С помощью Elementor вы можете создать любой эффект, только перетащив конструктор веб-страниц.
Украшение вашего интернет-магазина, создание привлекательных макетов блогов или создание отличных целевых страниц - Elementor получил вашу поддержку.
Просто следуйте инструкциям в этой статье и начните создавать свой новый веб-сайт с параллаксом.
Страница с параллаксом в Elementor Pro
Итак, давайте поработаем над добавлением эффектов параллакса на наши веб-страницы. Сначала выберите «Elementor Full Width» и перейдите на вкладку «Дополнительно». Конечно, на вашей странице должно быть несколько разделов, потому что красоту эффекта параллакса нельзя ощутить на пустой странице. У нас есть раздел-заполнитель, и вы можете использовать все, что вам нужно.
Чтобы установить эффект, перейдите в «Дополнительно»> «Эффекты движения» и включите «Эффекты прокрутки». Ниже вы увидите несколько вариантов стимулирования эффектов движения, зависящих от прокрутки.
Vertical
Например, я создаю спираль второй секции с другой скоростью, чем у героя. Помните, что у вас есть дополнительные настройки, над которыми вы можете работать и которые применимы для любого эффекта прокрутки. При вертикальной прокрутке вы можете выбрать положение элемента вверх или вниз, изменить частоту отображения и оказать влияние относительно области просмотра или всей страницы.
Horizontal
Как и в случае с вертикальной прокруткой, мы можем перемещать изображение или раздел по экрану горизонтально. Здесь вы можете выбрать левый или правый, скорость и процентное соотношение, видимое снизу и сверху.
Transparency
Вы можете получить очаровательный эффект затухания, используя эффект движения прозрачности. Прямо под этой областью есть открывающая анимация, которая выполняет то же самое. Тем не менее, эффект прозрачного движения предлагает вам массу возможностей управления, и когда он появляется. Для этого варианта вы сможете решить, хотите ли вы, чтобы он постепенно увеличивался, изменял состояние, затемнялся или постепенно появлялся, а затем исчезал. Вы сможете дополнительно установить уровень полной прозрачности от 1 до 10.
Blur
Эффект движения «Размытие» позволяет вам создавать изображения, которые начинаются нечеткими и доступны в фокусе вроде снимка с глубиной резкости, начинаются в определенном направлении и начинают размываться при прокрутке мимо него. Это выглядит очень круто. Как и в случае с эффектом прозрачности, размытие позволяет выбирать такие параметры, как усиление или исчезновение с разными стилями.
Это немедленные эффекты, на которые вы будете смотреть. Тем не менее, есть еще много чего, что нужно учитывать, например, вращение и масштабирование анимации, а также множество параметров стиля, эффекты мыши и другие впечатляющие эффекты, которые помогут элементам вашего веб-сайта появиться!
Step 1: Add parallax on a chosen Element
Чтобы добавить магический эффект параллакса на ваш сайт Elementor, первое, что вам нужно сделать, это выбрать элемент, к которому вы хотите его добавить. Это может быть что угодно, например картинки, текст, видео и т. Д.
Начнем с того, что щелкнем по виджету и перейдем в раздел расширенных вкладок.
Step 2: Under Motion and Switch to Scrolling Effects
Перейдя на вкладку «Дополнительно», щелкните раскрывающийся список «Эффект движения» и установите для «Эффекты прокрутки» значение «Вкл.». В настоящее время вы можете выбрать любую из полдюжины анимаций, которые могут оживить ваш сайт.
Step 3: change the Animation in step with Your Needs.
Вы можете изменять и настраивать каждое воздействие, чтобы добиться нужного результата. Нажмите значок карандаша, откроется окно с элементами управления.
Вы можете настроить такие параметры, как направление, скорость и область просмотра для эффекта {every}, который управляет, когда анимация начинается и заканчивается.
Кроме того, вы можете обозначить на шкале видового экрана, с какой части прокрутки будет начинаться ваш эффект и какой ролью он закончится.
Step 4: decide quite One Animation for one Element.
Для всех элементов вы можете реализовать столько эффектов, сколько захотите; просто НЕ растягивайте.
Нажатие на кнопку индикатора рядом с карандашом приведет к отмене анимации, поэтому не стесняйтесь исследовать ее и экспериментировать, пока не добьетесь идеального результата.
Для положения «Вращение» и «Масштаб» вы можете изменить точки крюка «X» и «Y», планируя ось, вокруг которой деталь масштабируется или вращается.
Step 5: Add Mouse Track & 3D Tilt
Разумеется, он работает только на настольных устройствах, но вы можете перемещать частицы с помощью мыши. Думаю, вам нравится наложение параллаксов мерцания, и вы хотите, чтобы они ассоциировались с вашей мышью.
Здесь у нас есть два варианта: Дорожка мыши, которая создает ощущение глубины, заставляя элементы перемещаться относительно движения мыши посетителя, и эффект трехмерного наклона, который наклоняет компонент в соответствии с той же тенденцией по указателям.
Step 6: Apply Parallax (Just the Motion Effect) on Various Devices
Эффект, который хорошо сочетается и кажется отличным на настольном компьютере, определенно не будет работать на мобильных устройствах. К счастью, Elementor 2.5 позволяет вам выбирать, на каких устройствах вы также хотите реализовать воздействия.
Эффект параллакса на фоне
Step 1: Go to Your Elementor Website and Tick on One of the Website's Sections
Теперь давайте сделаем параллакс фону, чтобы придать сайту большую глубину. Для этого нам нужно начать с раздела «Стиль».
Step 2: Below the Background Section, Shift to Motion or Mouse Effect
Теперь вы можете выбрать один из двух разных результатов, которые можно применить к более глубокому слою: эффект прокрутки и эффект мыши.
Step 3: Repeat Steps 3 to 6
Это точно такие же эффекты и реализация, что и раньше, только теперь его можно применять в фоновом режиме!
Вот как это работает:
Заключение
Я должен сказать, что единственная граница для параллакса - это разум. Люди создают изумительные эффекты параллакса, которые поразят вас, и Elementor pro - полезный плагин для воплощения этого воображения на веб-странице.
Каким бы ни был эффект, если он вызывает у посетителей эстетическое впечатление, вот где вам пригодятся ваше творчество и Element Pro.
