Как добавить эффекты наклона наведения к любому элементу в Divi

Добавление эффектов наклона при наведении к вашему веб-дизайну - один из тех забавных и увлекательных способов оживить ваш веб-сайт Divi. Обычно для этого типа дизайна требуется плагин или более сложный код (как в этом руководстве). Но этот процесс намного проще с использованием Tilt.js (облегченный эффект наклона при наведении курсора для jQuery). С помощью Tilt.js вы можете легко применить эффекты наклона при наведении к чему угодно за считанные минуты.

В этом уроке мы покажем вам, как добавить эффекты наклона при наведении курсора к любому элементу в Divi. Используя комбинацию фрагментов jQuery tilt.js и конструктора Divi, мы покажем вам, как добавить впечатляющие эффекты наклона при наведении курсора к изображению, столбцу модулей, строке и многому другому. Мы даже покажем вам, как добавить удивительные эффекты трехмерного параллакса.

Давайте начнем!

Sneak Peek

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

А вот краткий обзор дизайна, который мы построим в этом уроке.

Скачайте макет БЕСПЛАТНО

Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Чтобы импортировать макет раздела в свою библиотеку Divi, перейдите в библиотеку Divi.

Щелкните кнопку Импорт.

Во всплывающем окне переносимости выберите вкладку импорта и выберите файл для загрузки со своего компьютера.

Затем нажмите кнопку импорта.

После этого макет раздела будет доступен в Divi Builder.

Давайте перейдем к руководству, не так ли?

Что вам нужно для начала

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Выберите вариант «Строить с нуля».

После этого у вас будет чистый холст, чтобы начать проектировать в Divi.

Основы использования Tilt.js

Tilt.js - это облегченный эффект параллакса при наведении и наклоне для jQuery. С помощью всего пары строк jQuery вы можете добавить эффекты наклона при наведении курсора к любому элементу на странице. Он имеет до 10 опций (см. Документацию), которые можно легко добавить для управления дизайном и функциональностью эффекта наклона, включая масштаб и красивый эффект бликов .

На самом базовом уровне, как только вы получите доступ к библиотеке tilt.js, вы можете добавить класс CSS к элементу, который хотите наклонить при наведении, а затем использовать простой фрагмент jQuery, чтобы применить функцию наклона к объекту jQuery с тем же классом. .

Например, предположим, что вы добавляете собственный класс CSS в модуль изображения с именем «et-js-tilt».

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

$(".et-js-tilt").tilt();

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

$(".et-js-tilt").tilt({
  glare: true,
  maxGlare: 0.7,
  scale: 1.1
});

В результате получится такой ...

Для более продвинутого эффекта вы можете добавить transform: translateZ () к любым дочерним элементам, чтобы получить эффект трехмерного параллакса. Подробнее об этом позже.

Теперь, когда у нас есть базовое представление о том, как использовать tilt.js, давайте посмотрим, как использовать его в Divi.

Как добавить эффекты наклона наведения к любому элементу в Divi

Добавление эффекта наклона при наведении курсора на модули Divi

Добавьте строку из трех столбцов в обычный раздел по умолчанию.

Добавить модуль изображения

В первом столбце добавьте модуль изображения.

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

Загрузите изображение по вашему выбору. Я использую один из пакета макетов домашних файлов cookie.

Добавить класс модуля изображения

На вкладке «Дополнительно» добавьте следующий класс CSS:

• Класс CSS: et-js-tilt

Позже этот класс будет использоваться в качестве селектора для нашей функции наклона.

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

Затем скопируйте модуль изображения и вставьте по одному в каждый из двух оставшихся столбцов.

Вы можете заменить повторяющиеся изображения на новые, если хотите. Просто убедитесь, что каждый модуль изображения имеет CSS-класс «et-js-tilt».

Добавьте jQuery tilt.js

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

Сначала добавьте новую строку из одного столбца под существующей строкой.

Затем добавьте модуль кода в новую строку.

Затем нам нужно получить доступ к библиотеке tilt.js, добавив скрипт, который импортирует tilt.js из их CDN (https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery. min.js). Вставьте следующий сценарий в поле кода.

Используйте следующий src в теге скрипта для импорта библиотеки:

src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"

Должно получиться так:

Важно импортировать tilt.js перед добавлением кода, который будет его использовать. Итак, после сценария, указывающего на tilt.js, добавьте необходимые теги сценария, чтобы обернуть JQuery, который нам нужно добавить. Затем вставьте следующий JQuery между тегами скрипта .

jQuery(document).ready(function ($) {
  if ($(window).width() > 980) {

    $(".et-js-tilt").tilt({
      glare: true,
      maxGlare: 0.7,
      scale: 1.1,
      perspective: 300,
    });

  }
});

Обратите внимание, что функция tilt () находится внутри оператора if, который будет выполняться, когда ширина браузера превышает 980 пикселей. Это обеспечит эффект только на рабочем столе.

Вот результат.

Добавление эффекта наклона при наведении курсора на строку

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

Вот как это сделать.

Дублировать строку и добавить уникальный класс CSS в строку

Дублируйте существующую строку изображений, а затем откройте настройки повторяющейся строки. На расширенной вкладке присвойте строке уникальный класс CSS следующим образом:

• Класс CSS: et-row-js-tilt

Добавить jQuery

Затем добавьте следующий jQuery под предыдущую функцию наклона, чтобы применить к строке отдельную функцию наклона.

    $(".et-row-js-tilt").tilt({
      scale: 1,
      perspective: 1200,
    });

Обратите внимание, что для этого эффекта наклона мы вернули масштаб к 1 и увеличили значение перспективы, чтобы наклон был более тонким.

Вот результат.

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

Добавление эффекта наклона наведения к столбцу с несколькими модулями Divi

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

Добавить новую строку

Для начала создайте новую строку из одной шестой, двух третей, одной шестой колонки под предыдущей строкой изображений.

Добавить модуль изображения

Внутри столбца 2 (средний столбец) добавьте новый модуль изображения.

Загрузите изображение в модуль и установите выравнивание изображения по центру.

Добавить текстовый модуль

Под модулем изображения добавьте текстовый модуль со следующим заголовком H2:

<h2>Local Organic</h2>

Затем обновите стили заголовка 2 следующим образом:

• Шрифт заголовка 2: Berkshire Swash
• Выравнивание текста заголовка 2: по центру
• Цвет текста заголовка 2: # 000000
• Размер текста заголовка 2: 60 пикселей (рабочий стол), 32 пикселя (планшет), 20 пикселей (телефон).
• Высота строки заголовка 2: 1,2 м

Добавить модуль кнопок

Под текстовым модулем добавьте модуль кнопки.

Обновите текст кнопки, чтобы прочитать «О нас», и обновите настройки дизайна следующим образом:

• Выравнивание кнопок: centerr
• Размер текста кнопки: 18 пикселей
• Цвет текста кнопки: #fff
• Цвет фона кнопки: # 000
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 100 пикселей
• Шрифт кнопки: Quicksand
• Толщина шрифта кнопок: полужирный
• Отступ: 16 пикселей сверху, 16 пикселей снизу, 30 пикселей слева, 30 пикселей справа
• Box Shadow: см. Снимок экрана

Настройки столбца

После завершения трех модулей откройте настройки родительского столбца этих модулей (столбец 2) и обновите следующее:

• Цвет фона: # f5cee6

• Отступ: 50 пикселей (сверху и снизу), 20 пикселей (слева и справа).

Добавление класса CSS в столбец

На вкладке «Дополнительно» добавьте следующий класс CSS:

• Класс CSS: et-column-js-tilt

Добавление jQuery для применения эффекта наклона к столбцу

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

    $(".et-column-js-tilt").tilt({
      scale: 1.1,
      perspective: 1000,
    });

Вот окончательный результат.

Добавление эффекта 3D-параллакса к внутренним элементам

Для более продвинутого эффекта наклона при наведении мы можем добавить эффект трехмерного параллакса к внутренним модулям колонны. Используя комбинацию перспективы и преобразования: translateZ () , мы можем сделать так, чтобы каждый из модулей в столбце отображался в трехмерном пространстве, когда активен эффект наклона при наведении.

Вот как это сделать.

Дублировать предыдущую строку

Сначала продублируйте предыдущую строку с добавлением эффекта наклона в средний столбец.

Добавить уникальный класс столбца

Затем обновите средний столбец (столбец 2) уникальным классом CSS следующим образом:

• Класс CSS: et-column-js-tilt-3d

Пользовательские CSS

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

transform-style: preserve-3d;

Добавить jQuery и CSS

Затем добавьте еще несколько фрагментов jQuery под предыдущим фрагментом функции наклона, нацеленного на столбец, следующим образом:

    const columnTilt3d = $(".et-column-js-tilt-3d").tilt({
      scale: 1.1,
      perspective: 1000,
    });
    columnTilt3d.on("tilt.mouseEnter", function (e) {
      $(e.target).addClass("tilt-active");
    });
    columnTilt3d.on("tilt.mouseLeave", function (e) {
      $(e.target).removeClass("tilt-active");
    });

Этот jQuery добавляет к столбцу еще одну базовую функцию наклона, как и в предыдущем примере. Однако код также переключает новый класс («активный наклон») в столбец всякий раз, когда активен эффект наклона. Мы можем использовать этот новый класс для применения значения transform: translateZ () к каждому из модулей при наведении курсора на столбец. Это создаст всплывающий трехмерный эффект параллакса.

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

  .et-column-js-tilt-3d.tilt-active .et_pb_image {
    transform: translateZ(100px);
  }
  .et-column-js-tilt-3d.tilt-active .et_pb_text {
    transform: translateZ(40px);
  }
  .et-column-js-tilt-3d.tilt-active .et_pb_button {
    transform: translateZ(50px);
  }

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

Окончательные результаты

Вот еще один взгляд на окончательные результаты для наших примеров.

Последние мысли

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

Я с нетерпением жду вашего ответа в комментариях.

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