Хотите добавить эффект наклона с помощью Divi к любому элементу на вашей странице?
Добавление эффектов наклона при наведении курсора на ваш сайт — один из забавных и интересных способов оживить ваш сайт, созданный на Divi. Обычно для такого дизайна требуется плагин или более сложный код. Однако этот процесс намного проще с использованием Tilt.js (легковесный эффект наклона при наведении курсора для jQuery). С помощью Tilt.js вы можете легко применить эффекты наклона при наведении курсора практически к чему угодно за считанные минуты.
В этом уроке мы покажем, как добавить эффекты наклона при наведении курсора на любой элемент Divi. Используя комбинацию фрагментов кода jQuery tilt.js и конструктора Divi, мы продемонстрируем, как добавить впечатляющие эффекты наклона при наведении курсора на изображение, столбец модуля, строку и многое другое.
Мы даже покажем вам, как добавить потрясающие 3D-эффекты параллакса.
Давайте начнем!
обследование
Вот краткий обзор результата, который мы получим в этом уроке.
Смотрите также: Divi: как показать содержимое при наведении на разделитель раздела
Что нужно для начала
В панели управления WordPress перейдите к Страницы> Добавить новый для создания новой страницы.
Дайте ему название, которое имеет смысл для вас, и нажмите Используйте Диви Строитель
Затем нажмите Начать строительство (Построить с нуля)
После этого у вас будет чистый холст, чтобы начать проектирование в Divi.
Добавьте эффект наклона при наведении курсора на любой элемент в Divi.
Добавьте эффект Tilt Hover к модулям Divi.
Начнем с добавления строки из трех столбцов в обычный раздел по умолчанию.
Добавьте модуль изображения
В первый столбец добавьте модуль изображения.
Примечание: Вы можете использовать любой модуль по вашему выбору. Это не обязательно должен быть модуль для работы с изображениями.
Загрузите изображение по вашему выбору.
Добавьте класс модуля изображения
Под вкладкой Фильтр, добавьте следующий класс CSS:
- Класс CSS: et-js-tilt
Этот класс будет использоваться в качестве селектора для нашей функции наклона в дальнейшем.
Скопируйте и вставьте предыдущий модуль изображения
Затем скопируйте модуль изображения и вставьте по одному в каждый из двух оставшихся столбцов.
При желании вы можете заменить повторяющиеся изображения новыми. Просто убедитесь, что каждый модуль изображения принадлежит классу CSS. "et-js-tilt".
Добавьте библиотеку jQuery "tilt.js".
Чтобы добавить библиотеку наклон.js Для наклона изображений нам понадобится фрагмент кода, который можно найти в модуле Code.
Сначала добавьте новую строку в столбец, расположенный ниже существующей строки.
Затем добавьте модуль кода в новую строку.
Затем нам нужно получить доступ к библиотека наклона.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,
});
}
});
Обратите внимание, что функция tilt() находится внутри оператора if, который будет выполняться, когда ширина окна браузера превысит 980 пикселей. Это гарантирует, что эффект будет наблюдаться только на настольном компьютере.
Voici le résultat.
Добавлен эффект наклона при наведении курсора на строку.
Как мы уже упоминали, этот эффект наклона при наведении курсора можно добавить к любому элементу Divi. Это касается и целого ряда элементов.
Кроме того, вы можете добавить эффект наклона к строке, сохранив при этом эффекты наклона для каждого из модулей в этой строке.
Вот как.
Дублируйте строку и добавьте уникальный класс CSS в строку
Скопируйте существующую строку с изображением, затем откройте настройки скопированной строки. На вкладке Фильтр, присвойте строке уникальный класс CSS следующим образом:
- Класс CSS: et-row-js-tilt
Добавить jQuery
Далее добавьте следующий код jQuery ниже предыдущей функции skew, чтобы применить отдельную функцию skew к строке.
$(".et-row-js-tilt").tilt({
scale: 1,
perspective: 1200,
});Обратите внимание, что для создания этого эффекта наклона мы уменьшили масштаб до 1 и увеличили значение перспективы, чтобы наклон был менее выраженным.
Voici le résultat.
Обратите внимание, что линия имеет эффект наклона, который активируется при наведении на нее курсора, и каждый из модулей изображения также имеет тот же эффект наклона, который мы добавили ранее. Вот как можно применять вложенные экземпляры эффекта наклона.
Добавьте эффект Tilt Hover к колонке с несколькими модулями Divi
В некоторых случаях полезно добавить эффект наклона к столбцу модулей. Это позволяет спроектировать несколько модулей в столбец с помощью Divi, а затем расположить все эти элементы под наклоном как единое целое.
Чтобы показать вам, как это сделать, мы добавим эффект наклона при наведении курсора на столбец, содержащий модуль изображения, модуль текста и модуль кнопки.
Добавить новую строку
Для начала создайте новую строку со следующей структурой столбцов:
Добавьте модуль изображения
Внутри второго столбца (среднего столбца) добавьте новый модуль «Изображение».
Загрузите изображение в модуль.
Установите выравнивание изображения по центру.
Добавьте текстовый модуль
Ниже модуля «Изображение» добавьте модуль «Текст» со следующим заголовком H2:
<h2>Local Organic</h2>
Затем обновите стили заголовков H2 следующим образом:
- Шрифт: Berkshire Swash
- Выравнивание текста: по центру
- Цвет текста: #000000
- Размер: 60 пикселей
- Высота строки: 1,2 см
Добавить модуль кнопки
Под модулем «Текст» добавьте модуль «Кнопка».
Обновите текст кнопки, добавив надпись «Узнать больше...».
Обновите настройки персонализации следующим образом:
- Выравнивание кнопок: по центру
- Используйте пользовательские стили для кнопки
- Размер текста кнопки: 18px
- Цвет текста: #fff
- Фон кнопки: #000
- Ширина границы кнопки: 0 пикселей
- Радиус границы: 100 пикселей
- Шрифт кнопки: зыбучие пески
- Вес шрифта: полужирный
- Отступы (сверху и снизу): 16 пикселей
- Отступы (слева и справа): 30 пикселей
- Тень от рамки: см. скриншот
Параметры столбца
Когда все три модуля будут завершены, откройте настройки родительского столбца этих модулей (столбец 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-параллакса к внутренним модулям колонны.
Используя комбинацию функций perspective и transform:translateZ(), мы можем сделать так, чтобы каждый из модулей колонн отображался в трехмерном пространстве при активном эффекте наклона при наведении курсора.
Вот как.
Дублировать предыдущую строку
Сначала продублируйте предыдущую строку, добавив эффект наклона в средний столбец.
Добавить один класс столбца
Затем обновите средний столбец (столбец 2) уникальным классом CSS следующим образом:
- Класс CSS: et-column-js-tilt-3d
Пользовательский CSS
Чтобы внутренние модули сохранили 3D-эффект, добавьте следующий пользовательский 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 всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...