Полное руководство по использованию параллакса с Divi

Попытка найти изображение подходящего размера для параллакса может немного расстроить. Изображение может отлично выглядеть как стандартное фоновое изображение, но тогда, как только вы выберете «Использовать эффект параллакса», изображение будет увеличено, и все будет выглядеть неправильно. Чтобы избежать этого ухудшения в будущем, нужно понимать, что такое параллакс и что происходит с изображением, когда оно переводится в режим параллакса.

Сегодня я собираюсь углубиться в то, как параллакс работает с Divi. Я точно объясню, что происходит, когда вы используете два разных метода параллакса, какой размер изображения лучше всего, и я даже добавлю несколько пользовательских CSS-хаков, чтобы расположить ваши изображения так, как вы хотите.

Давайте идти.

Что такое параллакс?

Что касается веб-дизайна, параллакс - это термин, используемый для описания эффекта, который дает ощущение реалистичного расстояния и движения с использованием своего рода двухмерной анимации. Это достигается путем изменения скорости прокрутки различных элементов на веб-странице, чтобы создать иллюзию расстояния при просмотре фиксированной точки. Этот метод уже давно используется не только в Интернете, но и в других местах. Помните Super Mario Brothers? Если вы когда-либо играли в видеоигры 80-х годов (Nintendo NES), в большинстве игр использовалась эта техника, чтобы создать впечатление движения с использованием только двухмерных изображений. Предметы на переднем плане двигались быстрее, чем деревья / горы / облака на заднем плане. Таким образом создается более реалистичное движение.

Этот эффект очень похож на метод True Parallax в Divi. За исключением того, что движение вертикальное, а не горизонтальное.

Понимание того, как работает параллакс с Divi

С Divi Parallax действительно легко развернуть на любом фоновом изображении в любом разделе, строке, столбце или модуле. Все, что вам нужно сделать, это установить для параметра «Эффект параллакса» значение «ДА», а затем выбрать метод параллакса (CSS или True Parallax).

Метод CSS

Метод CSS - это один из двух методов, которые вы можете выбрать для эффекта параллакса. Вы, вероятно, сможете догадаться, что происходит, просто протестировав этот метод на своем сайте. Он называется методом CSS, потому что он использует только CSS для создания эффекта. Этот метод использует CSS для фиксации фонового изображения на месте, в то время как другие элементы на странице обычно прокручиваются. Это создает впечатление, что контент движется впереди фонового изображения.

Метод истинного параллакса

Второй метод называется True Parallax. Его называют «Истинным», вероятно, потому, что он иллюстрирует общепринятую идею эффекта параллакса. Этот метод использует CSS и JavaScript для создания немного более медленного движения прокрутки, чем другие элементы на странице. Это более реалистичное представление движения из-за ощущения расстояния, которое оно создает между медленно движущимся изображением на заднем плане и более быстро движущимися элементами на переднем плане.

Что происходит, когда в Divi включен параллакс?

Это может расстраивать, если вы не понимаете, что происходит за кулисами. Поэтому полезно точно знать, что происходит с изображением при активации параллакса.

Что происходит при выборе метода CSS?

Когда выбран CSS Parallax, изображение помещается в новый блок div с абсолютной позицией, охватывающей весь размер окна браузера. Вот классы CSS и фрагменты кода, которые делают это в Divi:

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
/*** This sets the image to fixed when using the CSS method ***/
.et_pb_section_parallax .et_pb_parallax_css, .et_pb_slides .et_parallax_bg.et_pb_parallax_css {
    background-attachment: fixed;
}

Поскольку размер фона установлен на «покрытие» с высотой и шириной 100%, изображение всегда будет «покрывать» каждую часть своего контейнера. В данном случае контейнер - это окно браузера. Это означает, что части изображения будут скрыты за другими разделами контента, поскольку фоновое изображение всегда будет расширяться и сжиматься вместе с размером окна браузера.

Представьте, что это обычное фоновое изображение, добавленное в модуль заголовка вверху страницы.

Соотношение сторон изображения правильное (1920 × 1080), а размер изображения покрывает и умещается в разделе красиво без какого-либо перекрытия при просмотре на экране размером 1366 × 766. Белая область под изображением - это остальное содержимое страницы.

Вот что происходит, когда вы выбираете параллакс для своего изображения.

Как видите, изображение расширяется как по вертикали (чтобы достичь нижней части окна браузера), так и по горизонтали (чтобы сохранить соотношение сторон изображения). Черный квадрат представляет ваш монитор, поэтому все внутри черного квадрата - это то, что видит зритель. Я сделал белый раздел содержимого внизу полупрозрачным, чтобы вы могли видеть, где за ним скрывается фоновое изображение. Там изображение остается фиксированным, пока вы прокручиваете, а другие элементы перемещаются вверх и вниз перед изображением.

Что произойдет при выборе метода истинного параллакса?

Если у вас установлен True Parallax, изображение будет помещено в новый div с тем же классом CSS:

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

Однако благодаря использованию небольшого количества JavaScript высота и положение изображения динамически устанавливаются в зависимости от размера окна браузера и при прокрутке страницы вниз. Два значения, которые динамически добавляются к фоновому изображению, - это значение в пикселях для свойства высоты и значение перевода для свойства преобразования. Значение свойства height определяет высоту изображения, в то время как значение свойства transform translate определяет точное расположение изображения на странице в соответствии с осями x и y.

Вот код, который вставляется в тег изображения моего фонового изображения параллакса с размером окна браузера 1366 × 766:

    height: 960.8px;
    transform: translate(0px, 220.5px);

Обратите внимание на два числа в свойстве преобразования. Эти два числа управляют расположением фонового изображения. Первое число (0 пикселей) позиционирует изображение по оси x (по горизонтали). Поскольку для него установлено значение 0 пикселей, изображение не будет перемещено. Второе число позиционирует изображение по оси y (вертикально). Поскольку в настоящее время он составляет 220,5 пикселей, это означает, что изображение перемещается вниз по странице на 220,5 пикселей.

Также обратите внимание, что значение высоты (960,8 пикселей) больше высоты окна моего браузера (766 пикселей) примерно на 200 пикселей. Это сделано для того, чтобы изображение перемещалось на 220,5 пикселей за нижнюю часть окна браузера.

Когда выбран метод True Parallax, вы могли заметить, что ваше изображение вздувается даже больше, чем метод CSS. Это связано с тем, что позиция изображения растягивается на дополнительные 30% от высоты браузера.

Помните нашу обычную фоновую иллюстрацию?

Вот что происходит с изображением после выбора True Parallax (конечно, до начала прокрутки):

Как видите, изображение вытягивается чуть дальше за нижнюю часть окна браузера. Размер этого окна браузера составляет около 1080 × 700, поэтому оно довольно мало, но я хотел показать вам, что происходит в меньшем окне рабочего стола.

Почему истинный параллакс так сильно растягивает изображение?

Что ж, я предполагаю, что нужно приспособиться к экранам большего размера. Когда окно браузера достигает размера экрана 1920 × 1080, фоновое изображение больше не выходит за нижнюю часть окна и хорошо вписывается.

Почему True Parallax использует JavaScript?

Основная причина, по которой True Parallax требует JavaScript, заключается в том, что фоновое изображение должно перемещаться с другой скоростью, чем другие элементы при прокрутке. Помните братьев Марио?

При использовании True Parallax, если я увеличиваю размер своего браузера, значение высоты также динамически увеличивается с помощью JavaScript, чтобы мое изображение всегда было достаточно большим для браузера.

Если я прокручиваю страницу вниз, значение позиции перевода (220,5 пикселей в приведенном выше примере) увеличивается, перемещая вертикальное (ось Y) положение изображения вниз по странице.

Если я прокручиваю вверх, значение позиции перевода уменьшается, и изображение перемещается вверх по странице. Но поскольку изображение сдвигается вниз и поднимается с другой скоростью, чем другие элементы при прокрутке, вы получаете эффект истинного параллакса.

Какое изображение мне следует использовать?

Если вы хотите использовать эффект параллакса на своем сайте, выбор правильного фонового изображения имеет решающее значение. Вы не хотите, чтобы фон был слишком загроможденным или отвлекающим. Но, с другой стороны, вы не хотите, чтобы это было скучным второстепенным примечанием.

Вот 5 общих советов по выбору правильного типа изображения для параллакса

1. Избегайте отвлекающих фотографий. Изображения, в которых слишком много чего происходит, создают путаницу и отвлекают от контента.
2. Убедитесь, что ваша фотография соответствует теме вашего сайта. Ваш сайт должен рассказывать историю. Это изображение с параллаксом (как и остальные ваши изображения) должно соответствовать теме.
3. Сделайте это большим и простым. Помните, что ваше параллаксное изображение также будет отображаться на экранах меньшего размера. Убедитесь, что детали фотографии не настолько мелкие, что их невозможно распознать на небольших устройствах.
4. При необходимости добавьте цвет наложения. Иногда хорошее изображение с параллаксом будет иметь как темные, так и светлые аспекты, которые могут скрывать ваш текст при прокрутке. Добавление темного или светлого наложения гарантирует, что ваш текст будет читаться в любом месте изображения.
   
5. Сделайте это интересным. Есть способ выложить фотографии, чтобы довольствоваться чем-то скучным. Найдите время, чтобы найти тот, который заинтересует вашу аудиторию и привлечет ее внимание.

Какой размер фонового изображения Parallax следует использовать?

На этот вопрос немного сложно ответить. Не существует единого формата, подходящего для всех изображений с параллаксом. На самом деле в веб-дизайне не существует универсального подхода ко всему, по крайней мере, с тех пор, как появился адаптивный дизайн. Но, даже если я не смогу дать вам твердого правила, я могу предложить некоторые общие рекомендации по выбору фоновых изображений с параллаксом правильного размера с помощью Divi.

Поскольку самый популярный размер экрана составляет около 1366 × 766, я бы обязательно удостоверился, что все фоновые изображения с параллаксом имеют хотя бы этот размер. Но из-за популярности мониторов большего размера я бы выбрал больший размер, например, 1920 × 1080. Это гарантирует, что пользователи увидят изображение высокого качества на больших компьютерах.

Проблема с изображением с размерами 1920 × 1080 заключается в том, что у вас редко когда-либо будет видимый раздел высотой 1080 пикселей. Таким образом, вы можете сделать ставку на нижнюю часть этих изображений, оставаясь скрытыми.

Полезные советы по правильному оформлению фонового изображения с параллаксом

Для заголовков и верхних разделов

Самый простой способ убедиться, что ваше изображение полностью видно и отлично выглядит, - это использовать модуль заголовка полной ширины. Таким образом, ваше фоновое изображение всегда будет отлично смотреться независимо от размера экрана. Но, если вы используете фоновое изображение параллакса с помощью модуля заголовка полной ширины, вам может потребоваться добавить некоторые отступы вверху и внизу модуля, чтобы показать больше изображения. Вы можете сделать это с помощью Visual Builder. Перейдите в настройки модуля заголовка. На вкладке Advanced введите следующее в текстовое поле Main Element:

Padding: 250px 0 250px;

Это должно заставить вас двигаться в правильном направлении.

Если у вас все еще недостаточно изображения, я бы предложил обрезать верхнюю часть изображения, а затем загрузить его снова. Это может помочь.

Кроме того, старайтесь выбирать фотографии с незначительным содержанием внизу изображения и с более важным содержанием вверху. Для заголовков вы должны ожидать увидеть только верхние 700 пикселей параллаксного изображения.

Для обычной / средней секции

Убедитесь, что вы оставили достаточно места вокруг вашего контента, чтобы выставить достаточно фона, чтобы вы могли получить полное изображение, когда раздел достигнет центральной точки обзора пользователя. Используйте обивку в ваших интересах. Если вы собираетесь использовать параллакс, не позволяйте пользователям запутаться и им придется прокручивать вверх и вниз, чтобы увидеть, что это за изображение. Лучше показать им первый раз.

Для нижних разделов / нижних колонтитулов

Если вы используете метод CSS, вы можете ожидать, что увидите большую часть нижней части фонового изображения (в зависимости от того, сколько у вас места). Я бы попытался обрезать нижнюю часть фотографии, чтобы показать больше верха в этих разделах.

Если вы используете метод True Parallax, вы будете видеть в основном верхнюю часть изображений, поэтому я буду рассматривать их как ваши заголовки.

Вот пример фоновых изображений True Parallax вверху, посередине и внизу страницы.

Этот тип изображения моста работает хорошо, потому что он имеет красивую точку фокусировки сбоку, а нижняя часть изображения не так важна, как верхняя, поэтому сообщение никогда не теряется для пользователя.

Вот та же страница, использующая метод CSS. Вы действительно можете видеть тот факт, что фоновое изображение фиксировано и расширяется до окна браузера. Кажется даже, что это одно и то же изображение, все время фиксированное на заднем плане.

Если вы все еще не удовлетворены после того, как вы нашли идеальное изображение, добавили необходимые отступы и обрезали его, вы всегда можете прибегнуть к некоторому взлому.

Хаки с параллакс-изображением: изменение положения изображения с помощью пользовательского CSS

Если вы хотите изменить положение фона параллакса, вы можете использовать селектор CSS «.et_parallax_bg». Вот CSS по умолчанию, который позиционирует изображение для эффекта параллакса.

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

Если вы заметили, по умолчанию свойство background position для метода css parallax, как показано ниже, установлено на «центр вверху». Но если бы я хотел изменить исходное положение фонового изображения, вы можете настроить значения свойства background-position.

Если вы хотите, чтобы ваш собственный CSS был сжат до определенного изображения и не влиял на весь ваш фон параллакса, вам нужно будет добавить класс в свой раздел, чтобы мы могли определить в CSS, какой фон нам нужно настроить.

Перейдите в настройки раздела на вкладке «Расширение» и введите класс CSS под названием «парахаки».
Теперь перейдите в Настройки страницы и выберите вкладку Дополнительно.

Затем используйте поле Custom CSS, чтобы ввести любой из следующих примеров Custom CSS:

При использовании метода CSS вы можете сделать фоновое изображение вертикально центрированным, добавив следующий настраиваемый CSS:

.parahacks .et_parallax_bg {
    Background-position: center center !important;
}

Чтобы выровнять фоновое изображение по низу, добавьте следующий настраиваемый CSS:

.parahacks .et_parallax_bg {
    background-position: bottom center !important;
}

Чтобы фоновое изображение переместилось на определенное количество пикселей вверх, добавьте следующий настраиваемый CSS:

.parahacks .et_parallax_bg {
    background-position: center -150px !important;
}

При использовании метода True Parallax необходимо учитывать дополнительные 220 пикселей (более или менее в зависимости от высоты вашего браузера) изображения, которое скрыто внизу. Чтобы сделать фоновое изображение более вертикально центрированным, вам необходимо настроить свойство background-position, используя отрицательное значение пикселя, например:

.parahacks .et_parallax_bg {
    background-position: center -100px !important;
}

Чтобы сделать фоновое изображение более выровненным по нижнему краю, добавьте следующий настраиваемый CSS:

.parahacks .et_parallax_bg {
    background-position: center -220px !important;
}

TL; DR? Вот краткое видео об основных моментах

Подпишитесь на наш канал Youtube

В заключение

Я искренне надеюсь, что это руководство было полезно для получения более глубокого понимания того, как параллакс работает с Divi. К счастью, Divi выполняет почти всю тяжелую работу по предоставлению нам функциональности параллакса. Как метод CSS, так и метод True Parallax сразу же создают отличные реалистичные эффекты. Однако наша задача - найти подходящие изображения и настроить их так, чтобы они работали на нашем сайте. Действуй! Бьюсь об заклад, вы создадите что-то потрясающее.

Будем рады услышать от вас в комментариях.

Ваше здоровье!