Добавление 3D-эффектов в файлы GIF и HTML5 для отображения уникальных анимаций продуктов в Divi

Анимированные GIF-файлы и видео в формате HTML5 отлично подходят для анимации работы продукта на вашем веб-сайте. Эти короткие анимации передают ценную информацию посетителю в более удобной для восприятия форме, чем обычное видео. Добавление такого типа GIF-файлов и видео HTML5 можно довольно легко сделать с помощью Divi. А проявив немного творчества, вы можете добавить 3D-эффекты для уникальной анимации продукта.

В этом уроке я покажу вам, как добавлять 3D-эффекты в файлы GIF и HTML5 для отображения уникальной анимации продукта в Divi. Этот дизайн действительно хорошо подходит для тех, кто ищет креативный макет для демонстрации избранного продукта или услуги. Для этого нам сначала нужно понять, как добавлять встраиваемые файлы GIF и HTML5 на вашу страницу с помощью Divi. Затем мы сможем использовать параметры преобразования Divi для позиционирования и поворота GIF (или видео) в трехмерном пространстве. В завершение мы будем использовать несколько техник дизайна Divi, чтобы создать красивый макет раздела, который будет сочетаться с этими 3D-гифками и видео.

Давайте начнем.

Sneak Peek

Вот краткий обзор дизайна, который мы создадим в этом уроке. Дизайн выглядит одинаково при использовании GIF и видео HTML5 для создания анимации продукта.

Загрузите 3D-эффекты для видео в формате GIF и HTML5 Анимация продуктов Divi Layout БЕСПЛАТНО

Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.

Давайте перейдем к руководству, не так ли?

Подпишитесь на наш канал Youtube

Использование GIF для коротких анимаций продукта

GIF-файлы существуют уже давно. Вероятно, это связано с тем, что GIF-файлы легко создавать и широко поддерживаются в браузерах. И они могут хорошо работать для очень коротких анимаций продукта. Поскольку GIF - это изображение, вы можете использовать его в модуле Divi Image, как и любой другой jpg или png. Это позволяет вам стилизовать GIF с использованием всех возможностей встроенных настроек Divi. Но будьте осторожны, GIF-файлы с большей продолжительностью и более высокой частотой кадров могут привести к действительно большим размерам файлов. Так что лучше, чтобы ваши GIF-файлы были как можно короче и меньше.

Использование HTML5 Video в качестве замены GIF

Видео в формате HTML5 становятся популярной заменой GIF, особенно для более длинных анимаций продуктов. Возможно, вы заметили, что они используются в новом дизайне веб-сайта Elegant Themes. Они значительно меньше по размеру по сравнению с GIF-файлами, поэтому на их загрузку уходит меньше времени. А добавить видео HTML5 на свой сайт Divi просто. Все, что вам нужно сделать, это добавить элемент видео HTML5, чтобы встроить видео на свою страницу (аналогично тому, как вы добавляете шорткод видео в WordPress). Вы также можете настроить видео со скрытыми элементами управления, зацикливанием и автовоспроизведением, что приведет к высококачественной анимации, которая работает так же, как GIF. Кроме того, при добавлении встраивания в модуль Divi вы также можете использовать конструктор Divi для создания творческого стиля видео.

Прочтите этот пост, чтобы узнать, почему вам следует рассмотреть возможность использования HTML5 Video вместо обычных GIF.

Теперь, когда мы немного больше разбираемся в использовании GIF-файлов и видео HTML5, мы готовы начать использовать их в Divi.

Что вам понадобится для этого урока

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

1. Изображение в формате GIF
2. Видеофайл MP4 (и URL-адрес этого видеофайла), который будет использоваться при встраивании видеоэлемента HTML5. Для максимальной поддержки браузера вы также можете включить это видео в формате webm (подробнее об этом позже).
3. Тема Divi установлена ​​и активна
4. Новая страница, созданная для создания с нуля в интерфейсе пользователя (визуальный конструктор)

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

Добавление 3D-эффекта к анимированному видео в формате GIF или HTML5

Прежде чем мы зайдем слишком далеко в разработку полного макета раздела для этого урока, я подумал, что было бы лучше показать вам, как добавить 3D-эффект как в GIF, так и в видео HTML5. Как только мы закончим, мы доработаем остальную часть макета раздела, придав ему красивый современный дизайн.

А пока давайте начнем с добавления 3D-эффекта к GIF в Divi.

Создание GIF

Есть много способов создать GIF в Интернете. Поскольку это руководство посвящено созданию GIF для анимации работы продукта, вам нужно будет записать часть экрана (с помощью средства записи экрана), а затем преобразовать видеофайл в файл GIF. Не забудьте создать GIF как можно меньше, чтобы ограничить размер файла и время загрузки. После создания GIF вы сможете использовать его, как любое другое изображение в Divi.

Если вы хотите узнать, как создать GIF с помощью Snagit, ознакомьтесь с нашим сообщением о том, как переключать фоновое изображение с анимированным Gif при наведении курсора.

Добавление 3D-эффекта в GIF в Divi

Теперь пришло время добавить GIF в Divi, чтобы мы могли стилизовать его с классным 3D-эффектом.

Для начала добавьте новый обычный раздел со строкой из двух столбцов.

Перед добавлением модуля нам нужно добавить свойство перспективы в столбец, который будет содержать наш GIF. Для этого откройте настройки строки и добавьте следующий фрагмент CSS в основной элемент столбца 1:

perspective: 1000px;

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

Теперь добавьте модуль изображения в столбец 1.

Загрузите GIF в модуль изображений. Для этого дизайна размер GIF должен составлять около 600 на 700 пикселей.

Затем используйте параметры преобразования, чтобы масштабировать, вращать и наклонять GIF в трехмерном пространстве.

Преобразование, поворот оси Y: 8 градусов
Преобразование, поворот оси X: 28 градусов

Преобразовать наклон оси Y: 10 градусов
Преобразовать наклон оси X: -8deg

Масштаб трансформации (планшет): 80%

Теперь посмотрим на результат.

Добавление 3D-эффекта к видео HTML5 в Divi

Прежде чем мы добавим 3D-эффект, нам сначала нужно создать наше видео HTML5. Ниже мы рассмотрим, как это сделать. Но если вам нужно более полное объяснение, ознакомьтесь с нашим сообщением «Как использовать HTML5-видео для создания анимированных GIF-файлов при меньших размерах файлов».

Создание кода встраивания видео HTML5

Элемент видео HTML5 имеет следующую базовую структуру.

<video>
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
</video>

Вам не нужно много знать о HTML, чтобы увидеть, что делает этот код. Внутри элемента <video> вас есть два элемента <source> которые содержат путь / URL-адрес к видеофайлам, которые вы хотите отобразить. Каждый исходный элемент имеет видео в разных форматах файлов (webm и mp4). Оба необходимы для максимальной поддержки браузером. Порядок тоже важен. Веб-видео помещается в коде над видео в формате mp4, поскольку это видеоформат более высокого качества, но менее поддерживаемый браузерами. Поэтому, если браузер поддерживает веб-видео, он будет отображать его. Но если браузер не поддерживает веб-видео, он будет использовать видео в формате mp4 ниже. Необязательно включать оба формата видео, но это лучше всего. И если вы собираетесь использовать только один, используйте формат mp4, потому что он более широко поддерживается.

Фактически, всякий раз, когда вы используете видеомодуль Divi для отображения размещенных на собственном сервере видео, Divi создает тот же элемент HTML5 video для отображения видео. Вот почему модуль «Видео» позволяет добавлять видеофайлы в формате mp4 и webm.

Чтобы использовать код для собственного видео, вам просто нужно добавить URL-адрес видео в круглых скобках после атрибута src .

Если вы загружаете видеофайлы на свой сайт WordPress, вы можете получить URL-адреса из медиатеки.

Затем вставьте URL-адреса видео в круглые скобки после атрибута src .

Когда вы закончите, это должно выглядеть примерно так.

<video>
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.webm" type="video/webm">
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.mp4" type="video/mp4">
</video>

Далее мы собираемся добавить четыре атрибута для управления отображением и функциональностью видео. Этот тип управления является основной причиной вставки видео HTML5 вручную вместо использования модуля Divi Video. Эти атрибуты включают autoplay (чтобы видео запускалось автоматически), loop (чтобы видео повторялось), muted звука (чтобы видео не воспроизводило звук) и playsinline (чтобы видео воспроизводилось в области воспроизведения элемента). Чтобы применить эти атрибуты к видео, добавьте каждый из атрибутов в скобки в начале <video> .

Теперь код будет выглядеть так.

<video autoplay loop muted playsinline>
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.webm" type="video/webm">
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.mp4" type="video/mp4">
</video>

Примечание: Как правило, вы бы применить controls атрибут для HTML5 видео, но в этом случае мы оставим это так видео будет функционировать как GIF.

Теперь вы готовы вставить код.

Встраивание видео HTML5

Чтобы встроить видео HTML5 на вашу страницу, мы можем использовать модуль кода.

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

Затем вставьте код встраивания видео HTML5 в поле ввода кода.

Затем скопируйте стили преобразования из модуля изображения и вставьте стили преобразования в модуль кода. Или вы можете обновить стили преобразования следующим образом:

Преобразование, поворот оси Y: 8 градусов
Преобразование, поворот оси X: 28 градусов
Преобразовать наклон оси Y: 10 градусов
Преобразовать наклон оси X: -8deg
Масштаб трансформации (планшет): 80%

Поскольку я использую то же видео, что и для создания GIF, дизайн будет очень похожим. Однако размер видео значительно меньше размера GIF. Вот результат.

Завершение проектирования макета разреза

Теперь у нас есть 3D GIF (или видео HTML5). Мы можем закончить разработку макета нашего раздела. Для этого дизайна я собираюсь использовать раздел с видео HTML5 в столбце 1.

Настройка раздела и строки

Откройте настройки раздела и обновите следующее.

Набивка: 15% верх, 15% низ

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

Цвет фонового градиента слева: # ba7fe8
Правый цвет градиента фона: # 4b84ff

Макс. Высота: 300 пикселей (компьютер), нет (планшет и телефон)

Padding: 0px сверху, 0px снизу

Затем мы можем придать строке полупрозрачную тень внутреннего блока для уникального элемента дизайна.

Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: 0 пикселей
Вертикальное положение тени блока: 0 пикселей
Сила распространения тени коробки: 40 пикселей
Цвет тени: rgba (255,255,255,0.89)

Размещение модуля кода

Теперь давайте немного поднимем модуль кода с видео, настроив свойство transform translate следующим образом:

Transform Translate Axis Y: -20% (рабочий стол), -7% (телефон)

Добавление модуля призыва к действию

Чтобы завершить дизайн, давайте добавим модуль призыва к действию в столбец 2. Это будет отличное место, чтобы добавить описание предлагаемого продукта с помощью кнопки.

Добавьте URL-адрес ссылки на кнопку, чтобы кнопка появилась.

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

Цвет фона: #ffffff
Выравнивание текста: по левому краю
Цвет текста: темный

Шрифт заголовка: Lato
Толщина шрифта заголовка: полужирный
Цвет текста заголовка: # 20292f
Шрифт тела: Lato
Цвет основного текста: # 6d7c90
Размер основного текста: 17 пикселей
Высота линии корпуса: 1,8 м

Размер текста кнопки: 12 пикселей
Цвет текста кнопки: #ffffff
Цвет фона кнопки: # 4b84ff
Ширина границы кнопки: 0 пикселей
Радиус границы кнопки: 100 пикселей
Расстояние между буквами кнопки: 2 пикселя
Шрифт кнопки: Lato
Толщина шрифта кнопок: Heavy
Стиль шрифта кнопки: TT
Отступ кнопки: 12 пикселей сверху, 12 пикселей снизу, 20 пикселей слева, 20 пикселей справа

Box Shadow: см. Снимок экрана
Вертикальное положение тени блока: 0 пикселей
Сила распространения тени коробки: 40 пикселей
Цвет тени: rgba (103,151,255,0.11)

Маржа: 10% справа

Transform Translate Axis Y: -33% (рабочий стол), -15% (телефон)
Преобразовать преобразовать ось X: -5%

Конечный результат

Рабочий стол

Планшет

Телефон

Последние мысли

Добавление 3D-эффекта к GIF-файлам и видео HTML5 действительно дает уникальное отображение для этих анимаций продукта. Параметры преобразования Divi (в сочетании со свойством перспективы) упрощают добавление 3D-эффектов к вашим GIF-файлам и видео.

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

Не стесняйтесь исследовать новые и захватывающие способы использования этого дизайна для демонстрации анимации продуктов и услуг в своем следующем проекте.

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!