Что такое параллакс эффект
Знакомство с Parallax Scrolling
Любой, кто играл или наблюдал за игрой друзей, либо в принципе видел игры, которые были выпущены в 80-90-х годах, должны быть знакомы с техникой параллакс-скроллинга.
Вспомните такие игры, как Mario Bros, Streets of Rage, Mortal Kombat, Turtles in Time или оригинальную игру Moon Patrol. В этих играх техника параллакса наблюдается в тот момент, когда несколько фоновых слоев с различными текстурами двигаются с разной скоростью, что создает эффект трехмерного пространства.
Почему я начал говорить о ретро-играх в статье о веб-разработке? Самым простым ответом мог бы быть «потому что они клевые», но нет. Параллакс-скроллинг является классным дизайнерским концептом, который прокладывает свой путь в мир веб-дизайна. Nike были одними из первых, кто использовал эту технику с большим успехом, когда они наняли маркетинговых гигантов Weiden and Kennedy для разработки их оригинального сайта Nike Better World. Сайт Nike Better World с того времени был обновлен и заменен на новый, однако есть другой сайт, довольно похожий на то, как выглядел первый параллакс-дизайн от Nike — сайт о спортивных напитках Activate.
Наверное, вы заметили, что во время прокрутки страницы сайта вниз несколько различных элементов, находящихся на этой странице, двигаются с разной скоростью. Давайте для примера возьмем страницу, отображенную на картинке сверху. По мере прокрутки страницы вниз вы увидите, что голубые точки в фоне (те, которые немного размыты), двигаются с той же скоростью, что и скроллбар. Также, вы увидите, что группа голубых точек, которые более сфокусированы и лежат на переднем плане, двигаются с немного большей скоростью, чем скроллбар. Быстрее этих точек двигается текст “0 SUGAR | 0 CALORIES | NATURALLY SWEETENED” и главный заголовок страницы “Products”. И, наконец, есть изображения самого продукта, как маленькие и расфокусированные в фоне, так и большие, сфокусированные и лежащие на переднем плане. Фоновые изображения продуктов двигаются с той же скоростью, что и текст, в то время как изображения продуктов на переднем плане двигаются быстрее этого текста. Это все и является идеальной демонстрацией параллакс-скроллинга, когда разные слои изображений накладываются друг на друга и все движутся с разной скоростью при прокрутке страницы, создавая эффект трехмерности.
Параллакс-скроллинг не ограничивается только вертикальным скроллом страницы или скроллингом по прямой линии. Отдадим право Nintendo для демонстрации идеального примера, подтверждающего это утверждение. Вспомните ранние игры Nintendo, где наши герои обычно двигались горизонтально слева направо вдоль экрана, а не вертикально вниз, как мы видели это на сайте Activate выше. Прокатитесь на MarkioKart Wii и давайте поговорим о некоторых клевых штуках, которые мы там можно увидеть.
Первую вещь, которую вы заметите, это направление скроллинга страницы — оно не вертикальное, а как сказано выше, а изначально горизонтальное. Конечно, это круто, но это также не новый концепт. Также, вы заметите параллакс-эффект с динозавром Йоши и панцирями на фоне, Марио и Луиджи на переднем плане и основным контентом, которые смещаются с разной скоростью при прокрутке. Но как только вы доедете до страниц #highlights и #attack, траектория смещения перестанет быть идеально горизонтальной. То же самое касается перехода между страницами #rediscover и #snes. Изображения не только сохраняют свою разную скорость смещения, но и меняют общее направление с горизонтального на вертикальное.
Стоит также отметить, что использование эффекта параллакса на вашем сайте не должно быть ограничено лишь возможностью создания искусственного 3D-эффекта. Сайт немецкой студии веб-дизайна Webseitenfactory является примером того, как можно использовать параллакс для добавления различных эффектов на страницу сайта, например движение иконок по разным траекториям, их увеличение и уменьшение по мере скроллинга сайта.
Моим первым впечатлением было “О, этот сайт выглядит симпатично”. Но когда я начал его скролить, впечатление сразу же стало “Вау, этот сайт крут!”. Добавление простого параллакс-эффекта как раз делает разницу между неплохим и запоминающимся.
Параллакс-скроллинг — это хороший трюк, который можно держать в рукаве. И его всегда можно применить независимо от того, делаете ли вы сложный мультистраничный сайт, или же простой одностраничный сайт-визитку.
10 потрясающих примеров параллакс скроллинга
Параллакс эффект на вашем сайте — это прекрасный способ удивить посетителей и улучшить поведенческий фактор. Такой сайт выглядит привлекательно и ваш посетитель как минимум потратит время на то, чтобы рассмотреть его.
Топ 10 сайтов с параллаксом
Параллакс эффект наиболее часто использовался в играх. И в последнее время приобрел второе дыхание на веб ресурсах, которые хотели добавить себе индивидуальности. Создать такой эффект не очень сложно, у нас есть подробная инструкция
как сделать параллакс на js.
Мы подобрали для вас 10 самых впечатляющих сайтов с примерами параллакса, чтобы вы могли вдохновиться на свой собственный дизайн. Но прежде, чем перейти к ним, давайте разберем что же это за эффект и почему он так привлекает внимание пользователей.
Что такое параллакс скроллинг?
Давайте отделим два слова друг от друга и разберем каждый по отдельности.
Параллакс — это зрительная разница в расстоянии между объектами на переднем и заднем плане. Скроллинг — это прокрутка экрана, то есть перемещение графики и текста в двухмерном пространстве.
Ну а параллакс скроллинг — это техника в веб дизайне, когда элементы фона на переднем и заднем плане двигаются с разной скоростью при прокрутке окна браузера. Это создает эффект трехмерного пространства.
10 примеров, которые взорвут ваших посетителей!
Если правильно и гармонично использовать эффект параллакса, то можно создать уникальный пользовательский опыт. Но если сделать плохо, то это отпугнет ваших посетителей или будет отвлекать от основной цели сайта. Будьте особенно осторожны с мобильной версией, там перебор с параллаксом может настолько замедлить работу браузера, что посетитель вашего сайта может сильно расстроиться. Рекомендуем тестировать поведение пользователей, чтобы добиться хороших результатов.
1 История Джесс и Расс
Два крутых американских дизайнера создали сайт, где рассказывают историю своих отношений и используют при этом параллакс скроллинг. В результате получился романтический рассказ, дополненный классной графикой.
10 потрясающих примеров параллакс скроллинга
2 Webflow
На этом сайте вы можете посмотреть всю историю интернета. Это довольно увлекательно, а параллакс эффект добавляет динамики истории.
3 Ресторан Koox
Этот ресторан расскажет вам о своем заведении, меню и поворах с помощью приятных иллюстраций дополненных параллакс эффектом. Только, пожалуйста, не открывайте этот сайт, если вы голодный.
4 Make Your Money Matter
Хоть тема финансов считается довольно сухой и скучной, этот сайт умудрился сделать из этого увлекательную историю, по просмотру которой вы побежите открывать себе счет.
5 Волкодав
Очень аккуратное и не навязчивое применение параллакс эффекта вы можете увидеть на сайте, посвященном волкодаву по имени Ворон. На этом сайте есть как текстовые параллакс эффекты, так и анимации Ворона, подкрадывающегося к своей жертве.
6 Epicurrence
Epicurrence — это конференция для творческих людей, которая проводится в Америке, штате Колорадо. Срезу на главном экране нас встречает параллакс эффект с использованием надписи и гор. В меру и со вкусом.
7 Гуччи гэнг.
Сюрреалистичные иллюстрации в сочетании с параллаксом дают незабываемый пользовательский опыт, проверьте сами!
8 Lopesce
Пожалуй, самый яркий промо сайт в этой подборке! На нем вы во всей красе увидите замороженные итальянские морепродукты.
9 Apple iPad Pro
На сайте эпл реализована горизонтальная прокрутка. За счет параллакс эффекта можно покрутить и повертеть Ipad как только вы захотите. Как всегда минималистичное и стильное решение.
10 Игра Firewatch
Возможно вы уже встречали ранее этот сайт как пример параллакса. Но нужно признать, сделан он фантастически. Яркая иллюстрация заката и множество слоев параллакса покоряют с первого раза.
Чтобы повторить это у себя на сайте, можете посмотреть наш туториал по параллаксу на js библиотеке SimpleParallax. Вы нашли больше интересных примеров? Оставляйте их в комментариях, лучшие мы добавим в наш топ.
Параллакс: глубинное зрение
Как мы определяем глубину — расстояние от нашего местоположения до другого объекта? Для этого существует несколько способов, и один из самых распространённых и простых для понимания включает в себя такое геометрическое явление, как параллакс. Этот чрезвычайно простой принцип используется нашими глазами и мозгом для формирования нашего трёхмерного изображения мира, а астрономы столетиями используют его для определения расстояний (или относительных расстояний) от Земли до астрономических объектов.
Ещё один распространённый способ определять расстояния включает в себя отправку волны (звука, света, чего-то ещё), распространяющейся с известной скоростью, которая отражается от объекта и возвращается к нам; время, затраченное на возврат волны — эхо — сообщает нам расстояние до объекта. По этому принципу летучие мыши определяют расстояние до пищи и препятствий, а также работает радар.
Рис. 1
Мы воспринимаем параллакс, даже не думая о нём, каждый раз, когда двигаем головой. Представьте, что произойдёт, Если ваш друг спрячется от вас, встав в нескольких метрах за крупным деревом (рис. 1, в центре). Если вы достаточно далеко отодвинетесь влево или вправо, вашего друга станет видно (рис. 1, слева и справа). Мы знаем, что всё дело просто в перспективе; при определённом угле зрения дерево уже не будет загораживать вам вашего таинственного друга. Геометрически происходящее изображено на рис. 1. Когда вы двигаетесь влево и вправо, смотря вперёд, близлежащие объекты меняют свой угол по отношению к тому, что находится прямо перед вами, быстрее, чем объекты, расположенные дальше. Из скорости изменения угла при вашем движении — из параллакса движения — вы можете понять, насколько далеко расположен объект.
Каждый ребёнок это знает, поскольку, когда вы выглядываете из окна движущейся машины, фонарные столбы проносятся мимо очень быстро, удалённые здания проходят медленнее, а Луна, находящаяся настолько далеко, что угол зрения по отношению к наблюдателю не меняется на ощутимую величину, пока машина едет по шоссе, как будто бы двигается вместе с машиной. Именно небольшой параллакс, являющийся следствием огромного расстояния, заставляет луну «следовать за машиной».
Все, кто смотрел старые двумерные мультфильмы (и многие современные), такие, как Флинстоуны, знают, что этот факт используется, чтобы изобразить глубину. Когда персонажи путешествуют в автомобиле, двигаясь слева направо, автомобиль рисуют неподвижным, деревья рисуют в другом слое, который с высокой скоростью передвигается справа налево, а холмы в удалении рисуют на третьем слое, который двигается справа налево чуть медленнее (см. рис. 2).
Рис. 2
Наша способность воспринимать глубину, даже не двигая головой, основана на том же принципе. Левый и правый глаз видят мир с немного разных углов. Попробуйте разместить пару объектов — неважно, каких, пусть даже это будут большие пальцы рук — так, чтобы один из них был в два раза дальше другого, и находился прямо за ним. Закройте левый глаз и посмотрите на них правым; затем поменяйте глаза; потом снова поменяйте, и сделайте так несколько раз — и вы увидите, что объекты двигаются, как на рис. 1, только ваш левый глаз увидит ближайший объект справа от того, что дальше, а правый глаз увидит его чуть левее.
Так почему вы воспринимаете эти объекты при помощи обоих глаз так, будто они находятся один за другим? У вашей оптической системы есть очень хитрый обработчик информации — своего рода компьютер. Для вас он создаёт не такую картину мира, какую непосредственно видят ваши глаза, а выстроенную на её основе при помощи сложных преобразований картину. Воспринимать глубину вам позволяет информация, полученная от двух глаз и скомбинированная вместе (это в основном — хотя параллакс движения тоже вносит свою лепту). Ни один из ваших глаз не может определить глубину, если вы стоите неподвижно. Попробуйте закрыть глаза, повернуться в другую сторону и открыть один глаз. Можете ли вы точно описать расстояние до предметов? Мир выглядит более плоским, более двумерным, чем обычно. С обоими открытыми глазами у вас нет таких проблем. Это использование двух изображений для использования трёхмерной карты мира называется стереоэффектом.
Но даже с одним открытым глазом вы можете довольно быстро оценить глубину, если подвигаете головой. Ваш мозг способен использовать параллакс движения — более быстрое изменение угла зрения на близлежащие объекты по отношению к отдалённым при движении влево или вправо — чтобы помочь восстановить часть информации о глубине, которая обычно получается сравнением вида из двух разных глаз (рис. 2).
Рис. 3
Какие основные подсчёты использует наша оптическая система? Простейший случай показан на рис. 3. Допустим, объект находится прямо перед вами. Если ваши глаза находятся на расстоянии R друг от друга, а ваш левый глаз видит объект под углом α правее по отношению ко взгляду прямо вперёд, а правый глаз видит объект под углом α левее, тогда согласно простейшей геометрии прямоугольных треугольников, расстояние D до объекта будет равняться
Из формулы видно, что когда D меньше, угол, на который линия взгляда на объект отстоит от прямого взгляда, становится больше. Именно этого мы и ожидаем от параллакса.
В более общем случае, показанном на рис. 4, когда объект находится не прямо перед вами, получается чуть более сложным, как и тригонометрические формулы, но в нём работает тот же самый основной принцип и в итоге его не так уж сложно подсчитать. Ваш мозг проделывает такие подсчёты так быстро (используя технику, которую мы пока ещё не раскрыли), что вы об этом и не подозреваете.
Для достаточно удалённых объектов угол α оказывается слишком малым для того, чтобы его восприняли ваши глаза и мозг. В этот момент ваше чувство глубины пропадает. Поэтому Луна не кажется расположенной ближе, чем звёзды; они находятся слишком далеко, чтобы ощутить глубину. Также вашего ощущения глубины обычно не хватает, чтобы понять, пройдёт ли самолёт перед или за горой вдалеке. Но это просто ограничение ваших глаз.
Рис. 4
Как определить расстояние до более удалённых объектов? Есть два варианта; разработать научный инструмент, способный измерять углы точнее, чем ваш глаз; увеличить R, чтобы сравнивать не вид из глаз, а, например, вид из двух камер, стоящих в нескольких метрах друг от друга, или даже в разных местах континента. А когда астрономы хотят измерить самые большие расстояния, какие только можно измерить при помощи параллакса, они сравнивают изображения удалённой звезды, сделанные с разницей в шесть месяцев, чтобы получить максимальное расстояние R на основании того, что Земля в течение года проходит довольно большое расстояние. Детали этих техник отличаются, но основной принцип тот же, что показа на рис. 3 и рис. 4 — принцип параллакса.
Что такое эффект параллакса? Зачем и как использовать его для WordPress
Эффект параллакса – чрезвычайно популярная функция дизайна, которая обычно используется на веб-сайтах WordPress. Этот специальный эффект использовался в игровом мире в течение многих лет, но недавно перешел в веб-дизайн. И пока что эта основная тенденция, кажется, никуда не денется, если уж на то пошло, она используется более широко, чем когда-либо. Итак, что такое эффект параллакса и почему вы должны рассмотреть возможность его использования на своем веб-сайте WordPress?
В этой статье мы рассмотрим, что такое эффект параллакса и какие преимущества он может принести вашему сайту и бизнесу. Затем мы обсудим, как быстро и легко добавить эффект параллакса на любой веб-сайт, страницу или публикацию WordPress с помощью темы или плагина.
Что такое эффект параллакса?
Эффект параллакса заключается в том, что фон веб-страницы движется медленнее, чем передний план. Это создает иллюзию глубины на странице, придавая контенту трехмерный эффект при прокрутке вниз.
Большинство премиальных тем WordPress теперь имеют встроенный эффект параллакса на своей домашней странице. Даже бесплатная тема WordPress по умолчанию Twenty Seventeen имеет функцию параллакса. Большинство конструкторов страниц также включают в себя инструмент эффекта параллакса, позволяющий добавить эффект на любую страницу или публикацию на вашем веб-сайте. И, конечно же, есть множество плагинов WordPress, которые вы можете установить, чтобы добавить элементы эффекта параллакса на свой сайт.
Каковы преимущества использования эффекта параллакса?
Есть ряд преимуществ использования эффекта параллакса на вашем сайте WordPress. Первый и наиболее очевидный – это визуальный аспект эффекта параллакса. Эффект параллакса эстетически приятен, придавая вашему сайту свежий, стильный и современный вид. Этот вау-эффект может сделать ваш контент действительно популярным и создать захватывающий и интересный опыт работы с браузером.
Еще одна ключевая причина использования эффекта параллакса на вашем сайте – это помочь разбить страницу, особенно домашнюю, на читаемые фрагменты. Используйте этот эффект, чтобы выделить различные разделы и типы контента, которые вы хотите продемонстрировать. Это может помочь продвинуть различные аспекты вашего веб-сайта, осветить важную информацию и побудить пользователей перемещаться по вашему сайту и получать доступ к контенту любым способом по вашему выбору.
Эффект параллакса можно использовать на любой странице или в сообщении веб-сайта, но чаще всего его можно увидеть на домашних страницах, целевых страницах или одностраничных сайтах. Потрясающий параллакс визуальных эффектов и положительный эффект, который он оказывает на взаимодействие с пользователем, могут привести к тому, что посетители будут дольше оставаться на вашем сайте, и помогут улучшить целевые показатели коэффициента конверсии.
Соображения при использовании параллакса
Несмотря на то, что есть преимущества, есть несколько ключевых моментов, которые следует учитывать при добавлении разделов параллакса на свой сайт.
Выбор фоновых изображений
Тщательно продумайте изображение, которое вы используете для каждого раздела фона. Убедитесь, что они имеют отношение к вашему сайту и синхронизируются с вашим брендом. Если вы собираетесь отображать заголовок или дополнительный контент поверх этого фонового изображения, подумайте об использовании цвета блока или тонких узоров вместо фотографии или привлекающей внимание графики. Это может помочь убедиться, что ваше изображение работает с вашим контентом и продвигает его, а не отвлекает от него.
Если вы решите использовать фотографии, изображения должны быть высокого качества. Красивые привлекательные изображения помогут придать вашему сайту профессиональный и неповторимый вид. Эти визуальные эффекты произведут сильное впечатление на вашу аудиторию, которая, в свою очередь, побудит людей вспомнить и вернуться на ваш сайт. Существует широкий ассортимент стоковых веб-сайтов, с которых вы можете загружать изображения высшего качества. Ознакомьтесь с нашей коллекцией бесплатных и премиальных веб-сайтов с фотографиями, на которых вы быстро найдете потрясающие фотографии для фона с параллаксом.
Параллакс на мобильных устройствах
Хотя параллакс отлично подходит для добавления визуального интереса, он не всегда хорошо работает на мобильных устройствах. Поскольку в телефонах и планшетах обычно используется прокрутка (вместо прокрутки, как на настольных компьютерах), эффекты параллакса могут отображаться неправильно. Конечно, это будет зависеть от метода и анимации, которые вы используете для своего собственного раздела параллакса. Однако для удобства использования вы можете рассмотреть возможность отключения параллакса на устройствах.
Параллакс и доступность
Параллакс не только снижает удобство использования на мобильных устройствах, но и создает некоторые проблемы с доступностью. Поскольку параллакс основан на движении, он может усложнить чтение и может вызвать проблемы совместимости с браузером или устройством (как уже упоминалось, особенно на мобильных устройствах). Кроме того, при перемещении слоев это может создавать проблемы с контрастом, еще более затрудняя читаемость. По этим причинам вам следует проявлять особую осторожность при создании разделов с параллаксом на своем веб-сайте.
Выберите тему с эффектом параллакса
Тем из вас, кто начинает новый проект, следует выбрать тему премиум-класса, которая включает функцию эффекта параллакса. И если вы хотите использовать эффект параллакса на различных страницах вашего веб-сайта, а не только на домашней странице, то вы можете рассмотреть многоцелевую тему, которая поставляется с расширенным конструктором страниц.
Такие темы, как Divi от Elegant Themes, Parallax от Themify и наша собственная тема Total Multipurpose WordPress Theme, включают в себя конструкторы страниц, предоставляющие инструменты для создания эффекта параллакса.
Добавить параллакс-фон с итоговым значением
Чтобы дать вам представление о том, как параллакс может работать с темами, ниже приведено руководство по добавлению фона параллакса в строку с темой Total. Total использует WPBakery для создания веб-страниц, но многие другие конструкторы страниц WordPress включают аналогичные параметры.
Сначала вам нужно вставить строку и добавить в нее содержимое. Затем щелкните значок карандаша, чтобы отредактировать строку. Поскольку дизайн, который мы создали выше, не имеет рамок и не включает боковую панель, мы выбрали параметр «Растянуть строку», чтобы убедиться, что наш фон параллакса полностью заполняет строку (примечание – Total также включает параметр полноэкранного режима, который можно включить, если вы хотите, чтобы фон строки и параллакса полностью заполнял окно браузера).
Затем в разделе «Параллакс» вы можете легко добавить фоновое изображение и установить скорость прокрутки для эффекта параллакса (чем больше число, тем больше будет перемещаться изображение, что также может потребовать большого изображения).
Total также предлагает расширенную опцию параллакса с дополнительными настройками для включения / отключения эффекта на мобильных устройствах, выбора стиля изображения (обложка, фиксированный или повтор), определения направления эффекта и, конечно же, скорости.
Вы также можете использовать настройки Overlay на одну вкладку, чтобы убедиться, что у вас есть достаточный контраст между фоном строки и содержимым (мы добавили белое наложение к нашему изображению). Как только вы закончите, не забудьте сохранить изменения в строке, а также страницу.
Добавьте слайдеры Parallax с помощью Slider Revolution
Если вам нужен популярный слайдер с эффектом параллакса, наш лучший выбор – плагин Slider Revolution. Этот премиальный плагин включает в себя сотни встроенных опций и функций для шрифтов, слоев, эффектов слайдера, макетов и, конечно же, параллакса.
Включить параллакс Slider Revolution
Сначала установите плагин, а затем либо импортируйте шаблон слайдера, либо начните создавать свой собственный слайдер с нуля (вы можете прочитать наше полное руководство по Slider Revolution для более подробной информации).
Затем отредактируйте основной фон слайда, чтобы добавить исходное фоновое изображение, и выберите вкладку «Параллакс / 3D », чтобы назначить уровень параллакса. Затем, когда вы добавляете слои, выберите параметр слоя Parallax / 3D для глубины параллакса, чтобы добавить движение вашему тексту, изображению, кнопке и другим слоям. Это так просто!
Когда вы закончите, сохраните слайдер и используйте шорткод, чтобы вставить его в любое сообщение или страницу. Или, если вы используете конструктор страниц, такой как WPBakery (ранее Visual Composer), вы можете использовать элемент Slider Revolution конструктора страниц, чтобы быстро выбрать и вставить свой слайдер.
Добавьте разделы параллакса с помощью бесплатного расширенного плагина WordPress Backgrounds
Если у вас уже есть тема, и она не включает встроенную опцию эффекта параллакса, вам следует подумать об использовании плагина WordPress для выполнения этой работы. Расширенные фоны WordPress (сокращенно AWB) – это популярный бесплатный вариант, который позволит вам добавить фоновое изображение с параллаксной прокруткой к различным элементам на странице или в публикации вашего веб-сайта. Добавьте фон прокрутки к одному элементу, тексту заголовка или целому разделу, содержащему любое содержимое, с помощью простого шорткода.
Итак, давайте теперь посмотрим, как установить и начать использовать Advanced WordPress Backgrounds с параллаксом.
Установка AWB
Чтобы установить плагин, войдите в свою панель управления WordPress как администратор и выберите в меню Плагины> Добавить новый.
Найдите расширенные фоны WordPress, затем выберите «Установить сейчас»> «Активировать».
С AWB способ добавления фона параллакса будет зависеть от того, какой редактор WordPress вы используете – Gutenberg, Classic или сторонний конструктор страниц, такой как WPBakery. Независимо от того, что вы используете, AWB предлагает множество простых вариантов для:
Кроме того, вы также обнаружите, что вкладка AWB была добавлена в ваше меню настроек WordPress. Здесь вы можете выбрать глобальную настройку видимости, чтобы отключить эффекты параллакса (и видео) для мобильных устройств, а также для определенных браузеров.
AWB Gutenberg
Расширенные фоны WordPress полностью совместимы с Gutenberg и даже включают в себя собственный настраиваемый блок, который вы можете использовать.
Для начала вам нужно вставить блок AWB. Затем нажмите, чтобы добавить другие блоки для вашего контента в AWB.
Когда вы закончите, щелкните блок AWB, а затем щелкните вкладку «Блок» в правом меню. Здесь вы можете добавлять и редактировать параметры фона для вашего блока.
Классический редактор AWB
В классическом редакторе AWB использует шорткод для добавления фона параллакса. Итак, вам нужно сначала создать свой контент, затем выделить раздел, для которого вы хотите создать фон, и щелкнуть значок AWB в редакторе.
Выберите фоновое изображение, затем начните прокрутку вниз, чтобы добавить остальные параметры. Например, добавление цвета наложения и типа параллакса. Когда вы закончите, нажмите «вставить».
Шорткод будет выглядеть примерно так:
В этом случае классический редактор может быть немного менее удобным для пользователя. Поскольку AWB – это шорткод, вы не можете просмотреть настройки фона из редактора.
AWB с WPBakery
Наконец, расширенные фоны WordPress также работают с конструктором страниц WPBakery. Использовать его здесь просто, так как они добавили вкладку в настройки строки.
Просто щелкните вкладку «Фоны (AWB)», чтобы создать и настроить свой собственный фон параллакса в любой строке.
Заключительные мысли об эффектах параллакса
Если ваша тема не имеет встроенной функции эффекта параллакса или если вы хотите добавить эффект не только на свою домашнюю страницу, то попробуйте плагин. Slider Revolution или бесплатные фоны Advanced WordPress отлично подходят. Любой из них позволит вам быстро создавать разделы параллакса для добавления на свои страницы или сообщения.
Как вы уже видели, добавление эффекта параллакса на ваш сайт может оказаться очень полезным. Это не только может значительно улучшить визуальные эффекты вашего сайта, но и поможет привлечь вашу аудиторию, позволит им легко перемещаться по вашему сайту и получать доступ к контенту, а также увеличить время, которое они проводят на вашем сайте. Это улучшенное взаимодействие с пользователем должно в конечном итоге помочь вашему сайту достичь поставленных целей. Независимо от того, стремитесь ли вы увеличить количество вернувшихся посетителей, собрать потенциальных клиентов или продать товары или услуги.
Вы добавите эффект параллакса на свою домашнюю страницу, целевую страницу, сообщение или где-нибудь еще? Поделитесь своими мыслями в комментариях ниже.