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

Читать 10 мин.

[et_pb_section fb_built=»1″ admin_label=»Раздел» _builder_version=»4.9.4″ _module_preset=»default» custom_padding=»||0px|||» da_disable_devices=»off|off|off» global_colors_info=»{}» da_is_popup=»off» da_exit_intent=»off» da_has_close=»on» da_alt_close=»off» da_dark_close=»off» da_not_modal=»on» da_is_singular=»off» da_with_loader=»off» da_has_shadow=»on»][et_pb_row column_structure=»1_2,1_2″ _builder_version=»4.9.4″ _module_preset=»default» custom_padding=»||0px|||» global_colors_info=»{}»][et_pb_column type=»1_2″ _builder_version=»4.9.4″ _module_preset=»default» global_colors_info=»{}»][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»]

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

[/et_pb_text][/et_pb_column][et_pb_column type=»1_2″ _builder_version=»4.9.4″ _module_preset=»default» global_colors_info=»{}»][et_pb_blurb title=»Divi в нашем каталоге» url=»https://wespe.club/product/divi-premialnaya-tema-wordpress/» url_new_window=»on» use_icon=»on» font_icon=»%%233%%» icon_placement=»left» use_icon_font_size=»on» icon_font_size=»67px» _builder_version=»4.9.4″ _module_preset=»default» header_font_size=»22px» body_font=»|300|||||||» background_enable_color=»off» custom_padding=»15px|20px|15px|20px|false|false» hover_enabled=»0″ border_radii=»on|20px|20px|20px|20px» box_shadow_style=»preset3″ global_module=»230121″ global_colors_info=»{}» sticky_enabled=»0″]

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

[/et_pb_blurb][/et_pb_column][/et_pb_row][et_pb_row _builder_version=»4.9.4″ _module_preset=»default» custom_padding=»8px|||||» global_colors_info=»{}»][et_pb_column type=»4_4″ _builder_version=»4.9.4″ _module_preset=»default» global_colors_info=»{}»][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» global_colors_info=»{}»]

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

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

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

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=»4.9.4″ _module_preset=»default» global_colors_info=»{}»][et_pb_column type=»4_4″ _builder_version=»4.9.4″ _module_preset=»default» global_colors_info=»{}»][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» global_colors_info=»{}»]

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

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=»4.9.4″ _module_preset=»default» global_colors_info=»{}»][et_pb_column type=»4_4″ _builder_version=»4.9.4″ _module_preset=»default» global_colors_info=»{}»][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» text_orientation=»center» custom_padding=»0px|||0px||» global_colors_info=»{}»][/et_pb_text][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» global_colors_info=»{}»]

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

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=»4.9.4″ _module_preset=»default» background_enable_color=»off» custom_margin=»|0px||0px|false|false» custom_padding=»0px||0px|||» global_colors_info=»{}»][et_pb_column type=»4_4″ _builder_version=»4.9.2″ _module_preset=»default» global_colors_info=»{}»][et_pb_divider color=»#eeeeee» divider_position=»center» divider_weight=»3px» _builder_version=»4.9.3″ _module_preset=»default» width=»25%» custom_padding=»30px||30px||false|false» global_colors_info=»{}»][/et_pb_divider][et_pb_blurb title=»Оглавление» use_icon=»on» font_icon=»%%71%%» icon_color=»#eeeeee» icon_placement=»left» content_max_width=»100%» use_icon_font_size=»on» icon_font_size=»100px» _builder_version=»4.9.3″ _module_preset=»default» header_level=»h2″ header_font=»||||||||» custom_margin=»||14px|||» global_colors_info=»{}»][/et_pb_blurb][et_pb_blurb title=»Для начала» url=»#begin» use_icon=»on» font_icon=»%%3%%» icon_color=»#b856c7″ use_circle=»on» circle_color=»#ffffff» use_circle_border=»on» circle_border_color=»#b856c7″ icon_placement=»left» content_max_width=»100%» use_icon_font_size=»on» icon_font_size=»16px» font_icon_tablet=»» font_icon_phone=»» font_icon_last_edited=»on|desktop» _builder_version=»4.9.4″ _module_preset=»default» header_font_size=»16px» header_line_height=»2em» custom_margin=»-71px||-2px|118px|false|false» custom_padding=»10px|||0px|false|false» global_colors_info=»{}» font_icon__hover_enabled=»on|hover» font_icon__hover=»%%1%%»][/et_pb_blurb][et_pb_blurb title=»Как создать эффект 3D анимации при движении мыши в Divi» url=»#part1″ use_icon=»on» font_icon=»%%3%%» icon_color=»#b856c7″ use_circle=»on» circle_color=»#ffffff» use_circle_border=»on» circle_border_color=»#b856c7″ icon_placement=»left» content_max_width=»100%» use_icon_font_size=»on» icon_font_size=»16px» font_icon_tablet=»» font_icon_phone=»» font_icon_last_edited=»on|desktop» _builder_version=»4.9.7″ _module_preset=»default» header_font_size=»16px» header_line_height=»2em» custom_margin=»||0px|118px|false|false» custom_padding=»10px|||0px|false|false» global_colors_info=»{}» font_icon__hover_enabled=»on|hover» font_icon__hover=»%%1%%»][/et_pb_blurb][et_pb_blurb title=»Часть 1: Создание контейнера для наведения и карточки со строкой и столбцом» url=»#part1″ use_icon=»on» font_icon=»%%3%%» icon_color=»#b856c7″ use_circle=»on» circle_color=»#ffffff» use_circle_border=»on» circle_border_color=»#b856c7″ icon_placement=»left» content_max_width=»100%» use_icon_font_size=»on» icon_font_size=»16px» font_icon_tablet=»» font_icon_phone=»» font_icon_last_edited=»on|desktop» _builder_version=»4.9.7″ _module_preset=»default» header_font_size=»16px» header_line_height=»2em» custom_margin=»||0px|118px|false|false» custom_padding=»10px|||0px|false|false» global_colors_info=»{}» font_icon__hover_enabled=»on|hover» font_icon__hover=»%%1%%»][/et_pb_blurb][et_pb_blurb title=»Часть 2: Создание элементов карточки» url=»#part2″ use_icon=»on» font_icon=»%%3%%» icon_color=»#b856c7″ use_circle=»on» circle_color=»#ffffff» use_circle_border=»on» circle_border_color=»#b856c7″ icon_placement=»left» content_max_width=»100%» use_icon_font_size=»on» icon_font_size=»16px» font_icon_tablet=»» font_icon_phone=»» font_icon_last_edited=»on|desktop» _builder_version=»4.9.7″ _module_preset=»default» header_font_size=»16px» header_line_height=»2em» custom_margin=»||0px|118px|false|false» custom_padding=»10px|||0px|false|false» global_colors_info=»{}» font_icon__hover_enabled=»on|hover» font_icon__hover=»%%1%%»][/et_pb_blurb][et_pb_blurb title=»Часть 3: Добавление собственного кода (CSS и JQuery)» url=»#part3″ use_icon=»on» font_icon=»%%3%%» icon_color=»#b856c7″ use_circle=»on» circle_color=»#ffffff» use_circle_border=»on» circle_border_color=»#b856c7″ icon_placement=»left» content_max_width=»100%» use_icon_font_size=»on» icon_font_size=»16px» font_icon_tablet=»» font_icon_phone=»» font_icon_last_edited=»on|desktop» _builder_version=»4.9.7″ _module_preset=»default» header_font_size=»16px» header_line_height=»2em» custom_margin=»||0px|118px|false|false» custom_padding=»10px|||0px|false|false» global_colors_info=»{}» font_icon__hover_enabled=»on|hover» font_icon__hover=»%%1%%»][/et_pb_blurb][et_pb_blurb title=»Заключение» url=»#bonus» use_icon=»on» font_icon=»%%3%%» icon_color=»#b856c7″ use_circle=»on» circle_color=»#ffffff» use_circle_border=»on» circle_border_color=»#b856c7″ icon_placement=»left» content_max_width=»100%» use_icon_font_size=»on» icon_font_size=»16px» font_icon_tablet=»» font_icon_phone=»» font_icon_last_edited=»on|desktop» _builder_version=»4.9.7″ _module_preset=»default» header_font_size=»16px» header_line_height=»2em» custom_margin=»||0px|118px|false|false» custom_padding=»10px|||0px|false|false» global_colors_info=»{}» font_icon__hover_enabled=»on|hover» font_icon__hover=»%%1%%»][/et_pb_blurb][et_pb_divider color=»#eeeeee» divider_position=»center» divider_weight=»3px» _builder_version=»4.9.3″ _module_preset=»default» width=»25%» custom_padding=»30px||30px||false|false» global_colors_info=»{}»][/et_pb_divider][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=»1″ admin_label=»Раздел» module_id=»begin» _builder_version=»4.9.4″ _module_preset=»default» custom_padding=»0px||0px|||» da_popup_slug=»begin» da_disable_devices=»off|off|off» global_colors_info=»{}» da_is_popup=»off» da_exit_intent=»off» da_has_close=»on» da_alt_close=»off» da_dark_close=»off» da_not_modal=»on» da_is_singular=»off» da_with_loader=»off» da_has_shadow=»on»][et_pb_row _builder_version=»4.9.4″ _module_preset=»default» global_colors_info=»{}»][et_pb_column type=»4_4″ _builder_version=»4.9.4″ _module_preset=»default» global_colors_info=»{}»][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» global_colors_info=»{}»]

Для начала

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/05/divi-tutorial-getting-started-791×1024-1.jpg» alt=»Эффект 3D анимации при движении мыши в Divi | WESPE CLUB» title_text=»Эффект 3D анимации при движении мыши в Divi | WESPE CLUB» _builder_version=»4.9.4″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» global_colors_info=»{}»]

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

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

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

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=»1″ admin_label=»Раздел» module_id=»part1″ _builder_version=»4.9.7″ _module_preset=»default» custom_padding=»0px||0px|||» da_popup_slug=»part1″ da_disable_devices=»off|off|off» global_colors_info=»{}» da_is_popup=»off» da_exit_intent=»off» da_has_close=»on» da_alt_close=»off» da_dark_close=»off» da_not_modal=»on» da_is_singular=»off» da_with_loader=»off» da_has_shadow=»on»][et_pb_row _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»0px|auto||auto||» custom_padding=»0px|||||» global_colors_info=»{}»][et_pb_column type=»4_4″ _builder_version=»4.9.4″ _module_preset=»default» global_colors_info=»{}»][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» text_font=»|700|||||||» text_text_color=»#f7f7f7″ text_font_size=»200px» text_line_height=»1em» custom_margin=»-1px||||false|false» custom_padding=»0px||0px|||» hover_enabled=»0″ text_font_size_tablet=»150px» text_font_size_phone=»120px» text_font_size_last_edited=»on|phone» text_text_shadow_style=»preset3″ text_text_shadow_blur_strength=»0.93em» global_module=»229767″ global_colors_info=»{}» sticky_enabled=»0″]

01

[/et_pb_text][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»-122px|||||» global_colors_info=»{}»]

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

[/et_pb_text][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»]

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

[/et_pb_text][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» global_colors_info=»{}»]

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

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

[/et_pb_text][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» text_font=»|700|||||||» text_font_size=»24px» global_colors_info=»{}»]

Раздел

[/et_pb_text][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» global_colors_info=»{}»]

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

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

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/05/divi-popout-3d-mouseover-animation-effect31.jpg» alt=»Эффект 3D анимации при движении мыши в Divi | WESPE CLUB» title_text=»Эффект 3D анимации при движении мыши в Divi | WESPE CLUB» _builder_version=»4.9.4″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» text_font=»||||||||» custom_margin=»80px||||false|false» custom_margin_tablet=»» custom_margin_phone=»» custom_margin_last_edited=»on|desktop» global_colors_info=»{}»]

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

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/05/divi-popout-3d-mouseover-animation-effect30.jpg» alt=»Эффект 3D анимации при движении мыши в Divi | WESPE CLUB» title_text=»Эффект 3D анимации при движении мыши в Divi | WESPE CLUB» _builder_version=»4.9.4″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version=»4.9.4″ _module_preset=»default» global_colors_info=»{}»][et_pb_column type=»4_4″ _builder_version=»4.9.4″ _module_preset=»default» global_colors_info=»{}»][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» text_font=»|600|||||||» text_font_size=»24px» custom_margin=»80px|||||» global_colors_info=»{}»]

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

[/et_pb_text][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» global_colors_info=»{}»]

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

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/05/divi-popout-3d-mouseover-animation-effect29.jpg» title_text=»divi-popout-3d-mouseover-animation-effect29″ _builder_version=»4.9.4″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»80px|||||» global_colors_info=»{}»]

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

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

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

ПРИМЕЧАНИЕ.

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

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/06/01-1.jpg» title_text=»01″ _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»80px|||||» global_colors_info=»{}»]На вкладке «Расширенный» присвойте строке кастомный CSS класс:

• CSS Class: et-hover-container

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

display:flex;
align-items:center;
justify-content:center;

Этот небольшой фрагмент удерживает столбец по центру по вертикали и горизонтали внутри строки (необходимо, потому что мы собираемся задать для нашего столбца заданную максимальную ширину).[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/06/02-1.jpg» alt=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» title_text=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»50px|auto||auto||» global_colors_info=»{}»][et_pb_column type=»4_4″ _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»]

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

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

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

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/06/03-1.jpg» alt=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» title_text=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»80px||||false|false» global_colors_info=»{}»]

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

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/06/04-1.jpg» alt=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» title_text=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»80px|||||» global_colors_info=»{}»]

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

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/06/05-1.jpg» alt=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» title_text=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»]На вкладке «Расширенный» присвойте столбцу собственный класс:

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

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

max-width: 600px;

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

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

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

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/06/06-1.jpg» alt=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» title_text=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=»1″ admin_label=»Раздел» _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»0px||||false|false» custom_padding=»0px||0px|||» da_disable_devices=»off|off|off» global_colors_info=»{}» da_is_popup=»off» da_exit_intent=»off» da_has_close=»on» da_alt_close=»off» da_dark_close=»off» da_not_modal=»on» da_is_singular=»off» da_with_loader=»off» da_has_shadow=»on»][et_pb_row module_id=»part2″ _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»0px||||false|false» custom_padding=»0px||0px||false|false» global_colors_info=»{}»][et_pb_column type=»4_4″ _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» text_font=»|700|||||||» text_text_color=»#f7f7f7″ text_font_size=»200px» text_line_height=»1em» custom_margin=»0px||||false|false» custom_padding=»0px||0px||false|false» text_font_size_tablet=»150px» text_font_size_phone=»120px» text_font_size_last_edited=»on|phone» text_text_shadow_style=»preset3″ text_text_shadow_blur_strength=»0.93em» global_module=»229769″ global_colors_info=»{}»]

02

[/et_pb_text][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»-80px||||false|false» custom_margin_tablet=»» custom_margin_phone=»» custom_margin_last_edited=»on|desktop» header_2_font_size_tablet=»» header_2_font_size_phone=»18px» header_2_font_size_last_edited=»on|tablet» global_colors_info=»{}»]

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

[/et_pb_text][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»]

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

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

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

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/06/07-1.jpg» alt=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» title_text=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»80px|||||» global_colors_info=»{}»]

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

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

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

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

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

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/06/08-1.jpg» alt=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» title_text=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][et_pb_column type=»4_4″ _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»80px|||||» global_colors_info=»{}»]

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

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

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

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/06/09.jpg» alt=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» title_text=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»80px||||false|false» global_colors_info=»{}»]

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

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

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/06/10-1.jpg» alt=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» title_text=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»80px|||||» global_colors_info=»{}»]

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

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

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/06/11-1.jpg» alt=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» title_text=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»80px|||||» global_colors_info=»{}»]

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

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/06/12-1.jpg» alt=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» title_text=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»80px|||||» global_colors_info=»{}»]

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

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

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/06/13-1.jpg» alt=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» title_text=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»80px||||false|false» global_colors_info=»{}»]

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

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

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/06/14.jpg» alt=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» title_text=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»80px|||||» custom_padding=»||0px|||» global_colors_info=»{}»]

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

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

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/06/15-1.jpg» alt=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» title_text=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»80px||||false|false» global_colors_info=»{}»]В редакторе нового текстового модуля вставьте следующий HTML-код заголовка H2:[/et_pb_text][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»-3px||||false|false» global_colors_info=»{}»]

The Divi Bike

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/06/16-1.jpg» alt=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» title_text=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»80px||||false|false» global_colors_info=»{}»]

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

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

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/06/17-1.jpg» alt=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» title_text=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»80px||||false|false» global_colors_info=»{}»]

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

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

[/et_pb_text][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»80px|||||» custom_padding=»||0px|||» global_colors_info=»{}»]

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

Использование отдельных текстовых модулей для заголовка и текста позволит нам добавлять к каждому из них разные эффекты 3D-анимации. Чтобы создать текст под заголовком, добавьте новый текстовый модуль под текстовым модулем заголовка.[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/06/19-1.jpg» alt=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» title_text=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»80px||||false|false» global_colors_info=»{}»]Затем в редакторе добавьте следующий контент:

The One and Only Divi Bike
(By Elegant Themes)

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/06/20-1.jpg» alt=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» title_text=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»80px|||||» global_colors_info=»{}»]

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

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

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/06/21-1.jpg» alt=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» title_text=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»80px|||||» global_colors_info=»{}»]

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

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

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/06/22-1.jpg» alt=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» title_text=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»80px|||||» global_colors_info=»{}»]

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

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

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/06/23-1.jpg» alt=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» title_text=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»80px|||||» global_colors_info=»{}»]

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

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

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/06/24-1.jpg» alt=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» title_text=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»79px|||||» global_colors_info=»{}»]

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

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

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/06/25-1.jpg» alt=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» title_text=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»80px|||||» global_colors_info=»{}»]

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

• et-card-button

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/06/26-1.jpg» alt=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» title_text=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=»1″ admin_label=»Раздел» module_id=»part3″ _builder_version=»4.9.7″ _module_preset=»default» custom_padding=»0px||0px|||» da_popup_slug=»part3″ da_disable_devices=»off|off|off» global_colors_info=»{}» da_is_popup=»off» da_exit_intent=»off» da_has_close=»on» da_alt_close=»off» da_dark_close=»off» da_not_modal=»on» da_is_singular=»off» da_with_loader=»off» da_has_shadow=»on»][et_pb_row _builder_version=»4.9.7″ _module_preset=»default» custom_padding=»0px||0px|||» global_colors_info=»{}»][et_pb_column type=»4_4″ _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» text_font=»|700|||||||» text_text_color=»#f7f7f7″ text_font_size=»200px» text_line_height=»1em» custom_margin=»-1px||||false|false» custom_padding=»0px||0px|||» text_font_size_tablet=»150px» text_font_size_phone=»120px» text_font_size_last_edited=»on|phone» text_text_shadow_style=»preset3″ text_text_shadow_blur_strength=»0.93em» global_colors_info=»{}»]

03

[/et_pb_text][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»-160px||||false|false» custom_margin_tablet=»-100px||||false|false» custom_margin_phone=»» custom_margin_last_edited=»on|phone» header_2_font_size_tablet=»24px» header_2_font_size_phone=»18px» header_2_font_size_last_edited=»on|phone» global_colors_info=»{}»]

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

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=»1″ _builder_version=»4.9.7″ _module_preset=»default» custom_padding=»||0px|||» da_disable_devices=»off|off|off» global_colors_info=»{}» da_is_popup=»off» da_exit_intent=»off» da_has_close=»on» da_alt_close=»off» da_dark_close=»off» da_not_modal=»on» da_is_singular=»off» da_with_loader=»off» da_has_shadow=»on»][et_pb_row _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][et_pb_column type=»4_4″ _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»]

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

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

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/06/28-1.jpg» alt=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» title_text=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»80px|||||» global_colors_info=»{}»]

Затем вставьте следующий пользвательский 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;
}

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/06/29-1.jpg» alt=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» title_text=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»80px||||false|false» global_colors_info=»{}»]Под 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)`);
});
});

[/et_pb_text][et_pb_image src=»https://wespe.club/wp-content/uploads/2021/06/30-1.jpg» alt=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» title_text=»Эффект 3D анимации при движении мыши в Divi | WESPE.CLUB» _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][/et_pb_image][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=»1″ admin_label=»Раздел» module_id=»part3″ _builder_version=»4.9.7″ _module_preset=»default» custom_padding=»0px||0px|||» da_popup_slug=»part3″ da_disable_devices=»off|off|off» global_colors_info=»{}» da_is_popup=»off» da_exit_intent=»off» da_has_close=»on» da_alt_close=»off» da_dark_close=»off» da_not_modal=»on» da_is_singular=»off» da_with_loader=»off» da_has_shadow=»on»][et_pb_row _builder_version=»4.9.7″ _module_preset=»default» custom_padding=»0px||0px|||» global_colors_info=»{}»][et_pb_column type=»4_4″ _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» text_font=»|700|||||||» text_text_color=»#f7f7f7″ text_font_size=»200px» text_line_height=»1em» custom_margin=»-1px||||false|false» custom_padding=»0px||0px|||» text_font_size_tablet=»150px» text_font_size_phone=»120px» text_font_size_last_edited=»on|phone» text_text_shadow_style=»preset3″ text_text_shadow_blur_strength=»0.93em» global_colors_info=»{}»]

Итоги

[/et_pb_text][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» custom_margin=»-160px||||false|false» custom_margin_tablet=»-100px||||false|false» custom_margin_phone=»» custom_margin_last_edited=»on|phone» header_2_font_size_tablet=»24px» header_2_font_size_phone=»18px» header_2_font_size_last_edited=»on|phone» global_colors_info=»{}»]

Заключение

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][et_pb_column type=»4_4″ _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»][et_pb_text _builder_version=»4.9.7″ _module_preset=»default» global_colors_info=»{}»]

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

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

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]