Анимация прокрутки параллакса в Oxygen Builder
Опубликовано: 2022-07-30В этом уроке мы собираемся создать уникальную многослойную сцену параллакса в Oxygen Builder. Это то, что поразит как клиентов, так и посетителей веб-сайта, и это не так уж сложно реализовать.
Во-первых, нам нужно создать активы изображения. Есть несколько способов сделать это, и как бы вы ни решили создать эту сцену, убедитесь, что есть несколько секций полной ширины, которые вы можете экспортировать. Каждый раздел должен представлять определенную глубину изображения. Например, на переднем плане могут быть деревья, затем холм, затем еще один холм и, наконец, солнце.
Для этого урока я решил использовать уже существующую сцену заката, которую я получил от сообщества Figma. Однако вы можете создать свой собственный в Figma или использовать другую программу, например Photoshop.
Мы опубликовали статью о создании подобной параллаксной анимации прокрутки на Elementor несколько лет назад и описали технику Photoshop, где вы можете взять реальное изображение, легко отделить и экспортировать его для этого эффекта. Прочтите это здесь:
Я бы предложил использовать Figma, потому что это бесплатно, просто, а также позволяет быстро экспортировать группы и слои.
Вот демонстрация, в которой мы создаем компонент холма за считанные секунды с помощью инструмента «Перо».
Объедините несколько из них вместе, создайте группу и легко экспортируйте, как мы сейчас обсудим.
После того, как вы создали сцену с несколькими группами и разной глубиной изображения, экспортируйте каждую группу по отдельности. В Figma это очень просто. Просто щелкните группу правой кнопкой мыши, выберите «Копировать/вставить как», а затем скопируйте как PNG.
Я делаю это для каждой группы элементов.
Затем я вставил эти PNG прямо в редактор Гутенберга, который автоматически загрузил их в медиатеку.
Кроме того, я установил плагин для оптимизации изображений (ShortPixel), который автоматически изменяет размер и минимизирует изображения, чтобы они быстро загружались во внешнем интерфейсе. Это важно, если вы собираетесь копировать и вставлять PNG-файлы непосредственно из рисунка, поскольку сам по себе он не оптимизируется — размеры файлов огромны.
Для фона я залил сцену линейным градиентом. В Figma есть отличная функция, с помощью которой мы можем экспортировать CSS. Просто щелкните правой кнопкой мыши, скопируйте css и вытащите только фон основного кадра.
Вот что у нас получается.
Теперь мы создаем раздел, который будет содержать все слои нашей сцены параллакса. Этот раздел не имеет отступов и установлен на полную ширину, чтобы сделать раздел захватывающим.
Затем я могу взять этот линейно-градиентный фон, который мы экспортировали, и добавить его в пользовательский CSS нашего раздела.
Теперь установите секцию так, чтобы она имела position:relative и не заполнялась. Сделайте его полной ширины и height:100vh и скройте переполнение, чтобы сцена содержалась.
Существует два основных способа размещения каждого слоя в сцене: как фоновые изображения или элементы <img>.
Я использую div и фоновые изображения, так как это быстрее. Наш раздел содержит 1 div для каждой группы элементов. Элемент div абсолютно позиционирован, а верхний, нижний, левый и правый элементы установлены на 0. Это заставляет его заполнять весь раздел, позволяя при этом перемещать его с помощью перевода для нашего эффекта параллакса.
Передний план, фон и все, что между ними, добавляется к сцене с помощью фонового изображения CSS.
- background-position обычно устанавливается на 100%, что сдвигает все вниз по сцене, выравнивая ее по низу. При необходимости мы можем легко изменить позиционирование, используя это свойство.
- фоновое изображение установлено, чтобы содержать, что означает, что оно будет полной ширины в своем div.
- Повтор не установлен
- Кроме того, добавьте класс, например
.plax_hill-1, чтобы упростить идентификацию при применении соответствующего эффекта.
Это делается для каждой группы, которую мы экспортировали, и они располагаются слоями друг над другом с помощью z-index.
Мы по-прежнему можем достаточно быстро реагировать, изменяя фоновое изображение в разных точках останова, чтобы приспособиться к изменению ориентации экрана с альбомной на портретную (я не делаю этого в этом уроке, но если бы этот эффект был запущен в производство, они по существу были бы другими). сцена для каждой точки останова, поскольку мы заменяем каждый раздел, чтобы занимать больше места, поскольку соотношение сторон становится длиннее).
*Для метода изображения используйте SRCSET.
Курс Oxygen Builder - Скоро!
Курс Oxygen Builder Mastery превратит вас из новичка в профессионала — включены модули ACF, MetaBox и WooCommerce.
Для изображения солнца мне пришлось расположить верхнюю часть фона на 50%, что поместило его в центр div, а не выровняло его до самого низа:
Теперь вся сцена, которую мы создали в Figma, экспортировали в формате PNG, загрузили в WordPress и построили на Oxygen, завершена. Он выглядит почти идентично нашему дизайну и реагирует на изменения размера экрана. Пока еще нет параллакса, который мы сейчас добавим.
Мы можем использовать любую библиотеку параллакса, которую захотим — все они делают одно и то же. Для этого урока я использую более новый, который называется lax.js.
Тем не менее, ознакомьтесь с Rellax.js и Paroller.js, для обоих из которых в этом блоге опубликованы учебные пособия специально для Oxygen Builder.
Для Релакса:
Для условно-досрочного освобождения:
Lax может делать параллакс, но он также может делать массу других вещей, что делает его невероятно мощной библиотекой анимации взаимодействия. Я хотел выделить его здесь и привести простой пример, чтобы показать вам, на что он способен.
По сути, у вас есть драйвер, а затем у вас есть эффект. Эффект применяется на основе драйвера. В этом примере нашим драйвером является вертикальная прокрутка и ее положение. Эффекты могут быть любыми, которые может предложить CSS. Для параллакса мы будем использовать transformY. Однако мы также можем изменить непрозрачность, масштаб, цвета и многое другое!
Подробнее о lax.js читайте здесь: https://github.com/alexfoxy/lax.js
Во-первых, мы включаем, добавляя скрипт из CDN в наш файл wp_head. Я использовал WPCodeBox для этого:
Затем в файле JS, добавленном в нижний колонтитул, мы инициализируем эффект, добавляем драйвер, который смотрит на положение прокрутки экрана, а затем добавляем к каждому элементу различные эффекты. Для всех разделов, кроме солнца, мы использовали для перевода, почему нужно манипулировать положением div на основе положения вертикальной прокрутки.
Для солнца мы по-прежнему используем положение вертикальной прокрутки в качестве триггера/драйвера, но вместо того, чтобы манипулировать положением, мы изменили масштаб при прокрутке.
Основываясь на общем расположении разделов после применения эффекта, мне пришлось вернуться и изменить фоновое расположение элементов, чтобы убедиться, что все выглядит правильно. Вы также можете попробовать компенсировать, используя поля или преобразования. Пока все относительно одного масштаба, в данном случае высоты экрана, он должен оставаться отзывчивым.
И, наконец, мы получаем конечный результат многоуровневого параллакса, который меняется при прокрутке. Это действительно уникально, и вы можете создать много разных образов, которые поразят как клиентов, так и посетителей.
Курс Oxygen Builder - Скоро!
Курс Oxygen Builder Mastery превратит вас из новичка в профессионала — включены модули ACF, MetaBox и WooCommerce.