Как создать эффект 3D анимации при движении мыши в Divi theme

ОРИГИНАЛ СТАТЬИ НА САЙТЕ

Эффект 3D-анимации при движении мыши — это способ увлекательного взаимодействия пользователей с контентом на вашем сайте. Обычно мы анимируем объекты при наведении на них курсора или при щелчке.



Divi в нашем каталоге

Лицензионная тема Divi в нашем каталоге ресурсов.

В этом уроке мы разберём более творческий способ анимации объектов при перемещении мыши, который создаёт ощущение, что объект объёмный. Это совершенно по-новому оживит ваш контент и сделает пользовательский опыт более разнообразным и интересным.

Чтобы добиться этого, мы будем использовать конструктор Divi для большей части работы, затем воспользуемся кастомным CSS и JQuery для создания анимации.

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

Часть 1: Создание контейнера наведения и карточки со строкой и столбцом

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

Но прежде чем мы создадим строку и столбец, давайте стилизуем раздел.

Раздел

Для начала откройте настройки стандартного раздела по умолчанию и сделайте фон:

• Цвет фона: rgba(68,55,99,0.1)

Padding: 7vh сверху, 7vh снизу

Строка (Контейнер наведения)

Добавьте в раздел строку из одного столбца.

Настройки строки

В настройках строки обновите следующее:

• Ширина желоба (Gutter Width): 1
• Ширина: 100%
• Макс.ширина: 70% (Десктоп), 60% (планшет), 50% (телефон)
• Padding: 7vh top, 7vh bottom, 5vw left, 5vw right

ПРИМЕЧАНИЕ. Хитрость заключается в том, чтобы создать строку с достаточным пространством вокруг столбца, чтобы можно было задействовать анимацию при движении мыши, двигая курсором по всей области строки (а не по столбцу). Ещё нужно оставить достаточно места вокруг строки, чтобы можно было переместить курсор за пределы строки (в пространство раздела, окружающее строку), чтобы анимацию перестала воспроизводиться элементы вернулись на исходное место.

На вкладке «Расширенный» присвойте строке кастомный CSS класс:

• CSS Class: et-hover-container

Затем добавьте следующий CSS к основному элементу:

display:flex;

align-items:center;

justify-content:center;

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

Столбец (или карточка)

После обновления строки откройте настройки столбца, чтобы создать стиль для нашей карточки следующим образом:

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

• Padding: 7vh top, 7vh bottom, 5% left, 5% right
• Скругление углов рамки: 30px

• Box Shadow: см. скриншот
• Вертикальная позиция Box Shadow: 0px
• Box Shadow Blur Strength: 80px
• Цыет тени: rgba(0,0,0,0.2)

На вкладке «Расширенный» присвойте столбцу собственный класс:

• Класс CSS: et-mousemove-card

После этого добавьте этот пользовательский CSS в основной элемент:

max-width: 600px;

Затем убедитесь, что для свойств переполнения установлено значение «visible».

• Горизонтальное переполнение (Horizontal Overflow): visible
• Вертикальное переполнение (Vertical Overflow): visible

ПРИМЕЧАНИЕ. Задавая столбцу максимальную ширину 600 пикселей, вы сохраняете согласованность дизайна при разных размерах браузера, а также увеличиваете пространство при наведении курсора вокруг столбца для контейнера (или строки) при наведении курсора. Радиус границы (закругленные углы), который мы добавили, скроет переполнение, поэтому нам нужно сделать его видимым. Если мы этого не сделаем, анимация не будет работать должным образом.

Создание элементов карточки

Круглый фон с логотипом

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

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

Удалите текст по умолчанию, чтобы модуль был пустым.

Затем добавьте градиентный фон:

• Цвет градиентного фона слева: #443763
• Цвет градиентного фона справа: #ea3900

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

• Фоновое изображение: [добавьте любое изображение логотипа в формате PNG размером примерно 60 на 60 px]
• Размер фонового изображения: Фактический размер

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

• Ширина: 160 px (Десктоп), 150 px (Планшет), 80 px (Телефон)
• Высота: 160 px (Десктоп), 150 px (Планшет), 80 px (Телефон)
• Закругление углов рамки: 50%

Такие значения ширины, высоты и радиус границы 50% дают нам искомую форму круга.

На вкладке «Расширенный» используйте следующие настройки позиции:

• Позиция: Абсолютная
• Расположение: Top Center
• Вертикальное смещение: 15%

Изображение карточки

Чтобы создать изображение продукта (в данном случае велосипеда), добавьте новый модуль изображения под предыдущим текстовым модулем.

Затем загрузите изображение в модуль. Убедитесь, что это изображение в формате png с прозрачным фоном. Мы используем изображение велосипеда из пакета макетов для ремонта велосипедов .

На вкладке дизайна обновите следующее:

• Выравнивание изображения: По центру
• Ширина: 90%
• Внешний отступ: 4vh снизу

На вкладке «Расширенный» присвойте изображению собственный класс:

• Класс CSS: et-card-image

Заголовок карточки

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

В редакторе нового текстового модуля вставьте следующий HTML-код заголовка H2:

<h2>The <span style="color: #ea3900;">Divi</span> Bike</h2>

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

• Шрифт заголовка H2: Bebas Neue
• Выравнивание текста H2: по центру
• Цвет заголовка H2: # 443763
• Размер текста заголовка H2: 75 px (Десктоп), 60 px (Планшет), 45 px (Телефон).
• Интервал между буквами H2: 0.05em
• Внешний отступ: 4vh снизу

На вкладке «Расширенный» добавьте пользовательский CSS класс:

• Класс CSS: et-card-heading

Текст карточки

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

Затем в редакторе добавьте следующий контент:

<p>The One and Only Divi Bike<br>(By Elegant Themes)</p>

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

• Толщина шрифта: Полужирный
• Размер текста: 18 px (Десктоп), 16 px (Планшет и Телефон)
• Высота строки: 1.8em
• Выравнивание текста: по центру
• Внешний отступ: 4vh (снизу)

Затем присвойте текстовому модулю CSS класс:

• Класс CSS: et-card-info

Кнопка карточки

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

В окне настроек кнопки задайте текст кнопки.

• Текст кнопки: Получить предложение

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

• Использовать пользовательские стили для Кнопка: ДА
• Размер текста кнопки: 25px (Десктоп), 20px (Планшет), 16px (Телефон)
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: #443763
• Ширина рамки кнопки: 0px
• Радиус скругления рамки кнопки: 30px
• Промежуток между буквами: 0.1em
• Шрифт текста кнопки: Bebas Neue
• Внутренний отступ (Десктоп): 0.5em верх, 0.5em низ, 3em слева, 3em справа
• Внутренний отступ (Телефон):  0.5em верх, 0.5em низ, 2em слева, 2em справа

Затем присвойте кнопке собственный CSS класс:

• et-card-button

03

Добавление пользовательского кода (CSS и JQuery)

Теперь, когда дизайн завершен, мы можем добавить код CSS и JQuery, необходимый для создания эффекта динамической 3D анимации при движении мыши для карточки/столбца и элементов карточки.

Для этого добавьте модуль кода под модуль кнопок.

Затем вставьте следующий пользвательский CSS в редакторе модуля кода, убедившись, что CSS заключен в теги <style>.

/*add perspective to row for 3d perspective of child elements*/

.et-hover-container {

perspective: 1000px;

}

/*preserve-3d needed for 3d effect on card elements*/

.et-mousemove-card {

transform-style: preserve-3d;

transition: all 100ms linear !important;

}

/*transition timing function and duration for card elements*/

.et-card-image,

.et-popout-title,

.et-card-info,

.et-mousemove-card .et_pb_button_module_wrapper {

transition: all 750ms ease-out !important;

}

/*transform styles for card elements*/

.et-card-image.transform-3d {

transform: translateZ(150px) rotateZ(10deg) !important;

}

.et-card-heading.transform-3d {

transform: translateZ(150px) !important;

}

.et-card-info.transform-3d {

transform: translateZ(50px) !important;

}

.et-mousemove-card .et_pb_button_module_wrapper.transform-3d {

transform: translateZ(150px) rotateX(20deg) !important;

}

Под CSS вставьте следующий JQuery, убедившись, что код заключен в теги <script>.

jQuery(document).ready(function ($) {

//Items

var $hoverContainer = $(".et-hover-container");

var $mousemoveCard = $(".et-mousemove-card");

var $cardImage = $(".et-card-image");

var $cardHeading = $(".et-card-heading");

var $cardInfo = $(".et-card-info");

var $cardButton = $(".et-mousemove-card .et_pb_button_module_wrapper");

//Moving Animation Event

$hoverContainer.on("mousemove", function (e) {

let xAxis = (window.innerWidth / 2 - e.clientX) / 25;

let yAxis = (window.innerHeight / 2 - e.clientY) / 25;

$mousemoveCard.css(

"transform",

`rotateY(${xAxis}deg) rotateX(${yAxis}deg)`

);

});

//Animate on Hover

$hoverContainer.hover(function () {

$mousemoveCard.toggleClass("transform-3d");

$cardHeading.toggleClass("transform-3d");

$cardImage.toggleClass("transform-3d");

$cardButton.toggleClass("transform-3d");

$cardInfo.toggleClass("transform-3d");

});

//Pop Back on mouseleave

$hoverContainer.on("mouseleave", function () {

$mousemoveCard.css("transform", `rotateY(0deg) rotateX(0deg)`);

});

});

Заключение

Как вы видите не так сложно сделать потрясающий еффект 3D анимации при помощи конструктора страниц Divi builder и небольшой магии JQuery. Таким образом можно анимировать любые объекты, что может быть полезным для разных задач. В любом случае вы найдёте применение этому знанию.

Ваши комментарии дадут нам понять насколько вам интересна эта тема.