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

Хотите добавить эффект наклона с помощью Divi на любом элементе вашей страницы?

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

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

Мы даже покажем вам, как добавить потрясающие 3D-эффекты параллакса.

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

обследование

Вот краткий обзор результата, который мы получим в этом уроке.

Смотрите также: Divi: как показать содержимое при наведении на разделитель раздела

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

В панели управления WordPress перейдите к Страницы> Добавить новый для создания новой страницы.

Дайте ему название, которое имеет смысл для вас, и нажмите Используйте Диви Строитель

Затем нажмите Начать строительство (Построить с нуля)

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

Добавляйте эффекты наклона при наведении на любой элемент в Divi.

Добавьте эффект Tilt Hover к модулям Divi.

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

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

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

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

Загрузите изображение по вашему выбору. 

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

Под вкладкой Фильтр, добавьте следующий класс CSS:

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

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

Скопируйте и вставьте предыдущий модуль изображения

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

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

Добавьте библиотеку JQuery «tilt.js»

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

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

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

Затем нам нужно получить доступ к библиотека наклона.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"

Это должно выглядеть так:

Важно импортировать наклон.js перед добавлением кода, который будет его использовать. Итак, после того, как скрипт указывает на наклон.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,
    });
 
  }
});

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

Voici le résultat.

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

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

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

Вот как.

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

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

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

Добавить jQuery

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

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

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

Voici le résultat.

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

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

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

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

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

Для начала создайте новую строку со следующей структурой столбцов:

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

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

Загрузите изображение в модуль.

Установите выравнивание изображения по центру.

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

Под модулем Image добавьте модуль Text со следующим заголовком H2:

<h2>Local Organic</h2>

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

• Шрифт: Berkshire Swash
• Выравнивание текста: по центру
• Цвет текста: #000000
• Размер: 60 пикселей
• Высота строки: 1,2 см

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

Под модулем «Текст» добавьте модуль «Кнопка».

Обновите текст кнопки, чтобы он читался «Подробнее…».

Обновите настройки персонализации следующим образом:

• Выравнивание кнопок: по центру

• Используйте пользовательские стили для кнопки
• Размер текста кнопки: 18px
• Цвет текста: #fff
• Фон кнопки: #000

• Ширина границы кнопки: 0 пикселей
• Радиус границы: 100 пикселей
• Шрифт кнопки: зыбучие пески
• Вес шрифта: полужирный

• Отступы (сверху и снизу): 16 пикселей
• Отступы (слева и справа): 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-эффект параллакса для внутренних частей.

Для более продвинутого эффекта наклона при наведении мы можем добавить 3D-эффект параллакса к модулям внутренней колонны. 

Используя комбинацию перспективы и transform: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 добавляет к столбцу еще одну базовую функцию наклона, как и в предыдущем примере. 

.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);
}

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

Читайте также: Divi: как показать содержимое при наведении на разделитель раздела

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

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

Скачайте DIVI прямо сейчас!!!

Заключение

Эффекты наклона при наведении, предлагаемые Tilt.js с ними действительно весело экспериментировать. 

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

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

Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

Но тем временем поделитесь этой статьей в разных социальных сетях.

...