Эффект 3D-анимации при движении мыши – это способ увлекательного взаимодействия пользователей с контентом на вашем сайте. Обычно мы анимируем объекты при наведении на них курсора или при щелчке.
-90% на Divi theme
Лицензионная тема Divi в нашем каталоге со скидкой 90%.
В этом уроке мы разберём более творческий способ анимации объектов при перемещении мыши, который создаёт ощущение, что объект объёмный. Это совершенно по-новому оживит ваш контент и сделает пользовательский опыт более разнообразным и интересным.
Чтобы добиться этого, мы будем использовать конструктор Divi для большей части работы, затем воспользуемся кастомным CSS и JQuery для создания анимации.
После этого у вас будет крутой дизайн элемента, который можно использовать в представлении новых товаров или услуг, да и много где ещё. Вот, что в итоге у нас получится. Круто выглядит!
Эффект 3D анимации при движении мыши
Посмотрите вживую, как это выглядит по ссылке.
Для начала
Для начала вам потребуется сделать следующее:
- Если вы еще этого не сделали, установите тему Divi
- Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
- Выберите вариант «Строить с нуля».
После этого у вас будет чистый холст, чтобы начать проектирование в Divi.
01
Как создать эффект 3D анимации при движении мыши в Divi
Часть 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 Class: et-hover-container
Затем добавьте следующий CSS к основному элементу:
|
1 2 3 |
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 в основной элемент:
|
1 |
max-width: 600px; |
Затем убедитесь, что для свойств переполнения установлено значение «visible».
- Горизонтальное переполнение (Horizontal Overflow): visible
- Вертикальное переполнение (Vertical Overflow): visible
ПРИМЕЧАНИЕ. Задавая столбцу максимальную ширину 600 пикселей, вы сохраняете согласованность дизайна при разных размерах браузера, а также увеличиваете пространство при наведении курсора вокруг столбца для контейнера (или строки) при наведении курсора. Радиус границы (закругленные углы), который мы добавили, скроет переполнение, поэтому нам нужно сделать его видимым. Если мы этого не сделаем, анимация не будет работать должным образом.
02
Создание элементов карточки
Круглый фон с логотипом
Для первого элемента внутри нашей карточки мы собираемся добавить круглый фон с логотипом, который будет находиться за изображением нашего велосипеда.
Добавьте в столбец новый текстовый модуль.
Удалите текст по умолчанию, чтобы модуль был пустым.
Затем добавьте градиентный фон:
- Цвет градиентного фона слева: #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
Заголовок карточки
После размещения изображения на своём месте, необходимо добавить новый текстовый модуль под изображеним, чтобы создать заголовок нашей карточки.
|
1 |
<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-анимации. Чтобы создать текст под заголовком, добавьте новый текстовый модуль под текстовым модулем заголовка.
|
1 |
<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>.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/*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; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
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. Таким образом можно анимировать любые объекты, что может быть полезным для разных задач. В любом случае вы найдёте применение этому знанию.
Ваши комментарии дадут нам понять насколько вам интересна эта тема. Писать нам или нет ещё на эту тему.
Спасибо! Отличный урок, взял на вооружение.
Спасибо за мнение, Валентин! Пользуйтесь и пишите о результатах.
Спасибо
Ребята, очень рад, что нашёл вас. Очень доходчиво. Много для себя нашёл полезного.