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

Эффект 3D анимации при движении мыши в Divi | WESPE CLUB

Wespe Club

Клуб веб-разработчиков. Наша миссия - сделать вебразработку понятной и доступной широкому кругу людей.

20.06.2021

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

-60% на Divi theme

Лицензионная тема Divi в нашем каталоге со скидкой 60%.

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

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

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

Эффект 3D анимации при движении мыши

Посмотрите вживую, как это выглядит по ссылке.

Для начала

Эффект 3D анимации при движении мыши в Divi | WESPE CLUB

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

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

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

01

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

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

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

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

Раздел

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

  • Цвет фона: rgba(68,55,99,0.1)
Эффект 3D анимации при движении мыши в Divi | WESPE CLUB
  • Padding: 7vh сверху, 7vh снизу
Эффект 3D анимации при движении мыши в Divi | WESPE CLUB

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

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

divi popout 3d mouseover animation effect29 | WESPE CLUB

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

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

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

ПРИМЕЧАНИЕ.

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

01 1 | WESPE CLUB
На вкладке “Расширенный” присвойте строке кастомный CSS класс:

  • CSS Class: et-hover-container

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

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

Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB

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

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

  • Цвет фона: #ffffff
Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB
  • Padding: 7vh top, 7vh bottom, 5% left, 5% right
  • Скругление углов рамки: 30px
Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB
  • Box Shadow: см. скриншот
  • Вертикальная позиция Box Shadow: 0px
  • Box Shadow Blur Strength: 80px
  • Цыет тени: rgba(0,0,0,0.2)
Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB
На вкладке «Расширенный» присвойте столбцу собственный класс:

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

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

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

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

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

Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB

02

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

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

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

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

Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB

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

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

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

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

  • Фоновое изображение: [добавьте любое изображение логотипа в формате PNG размером примерно 60 на 60 px]
  • Размер фонового изображения: Фактический размер
Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB

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

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

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

Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB

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

  • Позиция: Абсолютная
  • Расположение: Top Center
  • Вертикальное смещение: 15%
Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB

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

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

Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB

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

Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB

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

  • Выравнивание изображения: По центру
  • Ширина: 90%
  • Внешний отступ: 4vh снизу
Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB

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

  • Класс CSS: et-card-image
Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB

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

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

Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB
В редакторе нового текстового модуля вставьте следующий HTML-код заголовка H2:
Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB

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

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

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

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

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

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

Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB
Затем в редакторе добавьте следующий контент:

Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB

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

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

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

  • Класс CSS: et-card-info
Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB

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

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

Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB

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

  • Текст кнопки: Получить предложение
Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB

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

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

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

  • et-card-button
Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB

03

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

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

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

Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB

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

Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB
Под CSS вставьте следующий JQuery, убедившись, что код заключен в теги <script>.

Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB

Итоги

Заключение

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

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

Вам будет интересно…

Невероятно красивое интерактивное оглавление в Divi theme

Невероятно красивое интерактивное оглавление в Divi theme

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

4 комментария

  1. Валентин

    Спасибо! Отличный урок, взял на вооружение.

    Ответить
    • Wespe Club

      Спасибо за мнение, Валентин! Пользуйтесь и пишите о результатах.

      Ответить
  2. Dentyf

    Ребята, очень рад, что нашёл вас. Очень доходчиво. Много для себя нашёл полезного.

    Ответить

Оставить комментарий

Ваш адрес email не будет опубликован.