Уникальный эффект наведения для повторителей Oxygen Builder
Опубликовано: 2022-04-10В этом уроке мы собираемся создать уникальный эффект наведения для контента, отображаемого в повторителях Oxygen Builder. Этот эффект, смоделированный на основе «Эффекта искажения при наведении» Codrops и использующий исходный код из этого ресурса, создаст искаженное затухание до определяемого пользователем изображения, когда посетитель наводит курсор на ячейку ретранслятора.
Этот учебник будет включать в себя некоторые интересные концепции Oxygen Builder:
- Усовершенствованные методы репитера
- Группы полей ACF и ручная интеграция с Oxygen Builder
- Базовая сетка CSS
- Динамические атрибуты
- Использование блока кода и промежуточный JS
Сделав еще один шаг вперед, мы собираемся сделать эту функцию на 100% динамической, а это означает, что ее можно установить и забыть. Не нужно инициализировать определенный эффект для каждой ячейки!
Следуйте вместе (исходная загрузка):
Примечание. Это проверка концепции и, вероятно, требуется оптимизация для использования на рабочих сайтах.
Две другие вещи:
- Мы запускаем курс Oxygen Builder. Вы можете узнать больше здесь и присоединиться к списку ожидания.
- Это руководство было запрошено в нашей замечательной группе на Facebook . Мы будем рады, если вы присоединитесь!
Демонстрация эффекта:
Шаг 1: Поля ACF
Мы будем использовать ACF, чтобы сделать это на 100% динамичным и удобным для редактирования конечным пользователем. Создайте группу полей и добавьте изображение при наведении и изображение смещения. Начальное изображение будет избранным изображением поста. Изображение при наведении — это то, к чему исчезнет эффект, когда посетитель наведет курсор на повторяющийся пост.
Изображение смещения — это то, что будет использоваться для создания уникальной анимации morph/fade между двумя изображениями. В этом примере мы используем следующие изображения для смещения:
На самом деле вы можете использовать любое изображение, но лучше всего подходят черно-белые изображения с отличной текстурой. С этим методом легко экспериментировать!
Вот как выглядит группа полей и связанные с ней изображения при добавлении нового поста:
Шаг 2: Создайте структуру для эффекта
По своей сути мы копируем исходный код из примера Codrops с небольшими изменениями.
Мы просто дублируем HTML-структуру выше с элементами Oxygen Builder. Не забудьте добавить классы из приведенного выше примера HTML, так как мы собираемся добавить немного CSS, а JS использует их для идентификации определенных элементов. Если вы измените эти классы, вам потребуется соответствующим образом обновить CSS и JS.
Наш повторитель использует сетку CSS для равномерного распределения всех ячеек без особых усилий:
Шаг 3: Сделайте динамичным
Есть несколько вещей, которые нужно настроить, чтобы они были динамическими. Во-первых, сделайте так, чтобы повторитель запрашивал тип записи WordPress.
Затем установите дату и заголовок публикации, чтобы они были динамическими.
Теперь мы настроим три изображения. Здесь все может стать сложным. Установите URL-адрес изображения 1 в качестве URL-адреса рекомендуемого изображения.
Установите URL-адрес изображения 2 в качестве изображения при наведении, установленного в ACF. В этом руководстве поля ACF не отображались во всплывающем окне «вставить динамические данные» (вероятно, из-за ошибки Oxygen Builder 4.0 Beta 2). Есть простой обходной путь, если вы когда-либо сталкивались с этим:
1 - Вставьте динамические данные
2 - Выберите возвращаемое значение функции PHP
3 - вручную вставить содержимое поля ACF с помощью get_field('fieldname')
Наконец, нам нужно установить изображение искажения, которое эффект будет использовать для выполнения перехода морфинга. Это вставляется в HTML как атрибут данных, который JS считывает и включает в эффект. Из приведенного выше HTML-кода видно, что есть несколько атрибутов, которые можно редактировать для изменения эффекта.
Главное, что нам нужно сделать динамическим — это data-displacement, у которого будет URL изображения, заданный в посте с помощью ACF. Мы жестко закодировали остальные три атрибута, но вы можете использовать тот же метод, описанный ниже, чтобы сделать их доступными для редактирования пользователем.
Перейдите к элементу оболочки изображения (div вокруг двух динамических изображений). Нажмите «Дополнительно» -> «Атрибуты» и добавьте следующее.
Для data-displacement мы сделаем это динамическим, нажав кнопку data+ в содержимом и вставив соответствующее поле ACF.
Внешний HTML-код будет выглядеть следующим образом, и JS будет использовать все эти данные (которые являются динамическими и редактируемыми пользователем через ACF) для создания классного эффекта наведения смещения в WordPress:
Шаг 4: Добавьте CSS, библиотеки и JS
Мы добавим следующий CSS в нашу универсальную таблицу стилей CSS. Возможно, вам придется поиграть с дополнительными стилями CSS, чтобы все работало хорошо.
Наконец, мы загрузим необходимые JS-библиотеки и код (мы сделали это с помощью блока кода):
В нашем примере мы используем Staticly (подтягивая библиотеки ImagesLoaded и Hover Effect из GitHub), но в идеале вы должны разместить это на своем сайте, используя такой инструмент, как Scripts Organizer или Advanced Scripts.
Мы также загружаем Three.JS и TweenMax.JS, которые являются двумя базовыми библиотеками, которые работают для создания эффекта смещения.
Наконец, JS делает следующее: он определяет, когда загружаются изображения, и применяет эффект наведения к любому элементу, имеющему .grid__item-img , извлекая связанные изображения и изображения смещения из каждого сообщения. Полностью динамический и будет работать независимо от количества сообщений, возвращенных ретранслятором Oxygen Builder.
После добавления всего этого ваш эффект должен работать!
Об этом попросил член нашей группы Isotropic в Facebook. Мы приглашаем вас присоединиться сюда.