3Д гифки: 3-х мерные (3D) анимации загрузки GIF, SVG, APNG (загрузчики AJAX)

Наведите курсор на изображения, чтобы увидеть эффект объёма.
Изображения любезно предоставили StereoPhoto Maker (слева) и Джим Гасперини (справа).

Обзор: объёмный вид и спаренные камеры

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

Обычный стереоснимок просто имитирует наши глаза: он состоит из двух фотографий, которые были сняты с различных позиций. Чем больше смещение, тем сильнее эффект объёма — и тем сильнее предметы переднего плана смещаются относительно фона.

Однако угол зрения объектива камеры зачастую отличается от угла зрения наших глаз, а соответственно, может меняться и дистанция между точками съёмки. Кроме того, для большинства 3D-техник принципиальное различие состоит в методе объединения изображений. Данная статья посвящена лишь одному из них: анимации «дрожанием» изображений.

Как устроено объёмное «дрожание»

Вместо того, чтобы попытаться показать каждому глазу отдельный снимок, «дрожащее» изображение имитирует то, что увидят оба глаза, если, сфокусировавшись, крутить головой туда-сюда. Наш мозг оценивает смещение предметов друг относительно друга — и автоматически трансформирует его в ощущение объёма.

Автором снимка является Джим Гасперини

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

Этап №1: как получить стереоснимок

Чтобы создать анимированное объёмное изображение или «дрожащее изображение», используется несколько иная техника съёмки, нежели для стандартных 3D-снимков. Вместо съёмки с параллельными линиями зрения, для дрожащих изображений используют сходящиеся линии зрения. Их можно получить следующим образом:

1.1. Определите композицию, которая распространяется на передний, средний и задний планы. Избегайте смещения предметов.

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

1.3. Сделайте первый снимок, тщательно выдерживая выбранное расстояние.

1.4. Переместите камеру на 10-30 см* влево, слегка изменив линию зрения вправо (или наоборот), так чтобы выбранный предмет занимал в кадре то же положение, что и на предыдущем снимке. Это наиболее сложный из шагов, который наверняка потребует некоторой практики.

* Примечание по поводу смещения. Вы наверняка захотите попробовать различные смещения в зависимости от фокусного расстояния, расстояния до предмета и его предполагаемого размера в кадре. Как правило:

Имейте в виду, что широкоугольные снимки обычно делаются намного ближе к предмету (см. «Использование широкоугольных объективов»). Близкие предметы требуют меньшего смещения, так что на практике для широкоугольных объективов может потребоваться не такое большое смещение, как для телеобъективов.

Зачастую самым простым способом определить величину смещения будет подвигать камеру туда и обратно до тех пор, пока движение не станет выглядеть удовлетворительно в видоискателе или на ЖК-экране. К счастью (или к сожалению), точных цифр не существует, и приемлемый результат могут дать разные смещения. Тем не менее, слишком маленькое смещение может исключить эффект объёма, а слишком большое может привести к тому, что анимация будет выглядеть как чередование двух плоских кадров. В любом случае хорошей идее является сделать несколько снимков с разными смещениями, чтобы иметь возможность оценить влияние различного смещения на результат и выбрать наилучшее.

Этап №2: как создать объёмный анимированный GIF

Последовательность действий показана на примере программы Photoshop, однако многие другие программы редактирования изображений тоже подойдут. В общем, используемая программа должна поддерживать слои и запись анимации в GIF. Кроме того, существует бесплатная автоматизированная программа, называемая StereoPhoto Maker. В любом случае, последовательность действий такова:

2.1. Вставьте один из снимков в качестве нового слоя над другим:

2. 2. Измените плотность верхнего слоя на 50% и скорректируйте его положение таким образом, чтобы выбранные в п. 1.2 предметы совпадали по положению с нижним слоем. Потом верните непрозрачность верхнего слоя. Это не всегда обязательно, но может быть полезно для минимизации влияния ошибок, допущенных в п. 1.4.

2.3. Откройте окно анимации (Photoshop: Window → Animations). Затем создайте второй кадр анимации, нажав на кнопку, обведенную красным.

2.4. Выберите первый кадр и сделайте в нём видимым только нижний слой (как показано ниже), затем выберите второй кадр и сделайте видимым только верхний слой (или наоборот).

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

2.6. Если вы удовлетворены результатом, сохраните изображение как анимированный GIF, используя меню «File → Save for Web & Devices …» и выбрав «GIF» в меню формата вверху справа. Полученный эффект объёма можно будет наблюдать в программе просмотра изображений, почтовом клиенте или браузере.

Прочие способы создания и просмотра объёмных снимков

Есть несколько других достаточно сложных способов получения и просмотра 3D-фотографий, но они не настолько просты в просмотре, как вышеприведенное «дрожащее изображение». К наиболее популярным методам относятся:

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

• Стереопары изображений, просматриваемые в перекрёстном фокусе. Чтобы добиться объёма, нужно всего лишь расположить изображения по разным сторонам и посмотреть на них, расфокусировав глаза. Если всё сделано правильно, каждого изображения станет два, но центральные изображения при этом сойдутся в одно объёмное. Тем не менее, это наиболее сложный и неестественный способ просмотра.
• Стереограммы. Их несколько проще увидеть, чем стереопары, но они не передают в объёме цвет.
• Красно-синие композитные изображения, просматриваемые в красно-синих очках («анаглиф»). Просмотр относительно прост, таким образом показывали все старые объёмные фильмы, однако цветопередача выглядит гораздо менее естественно, чем в новых поляризованных объёмных фильмах (далее).
• Наложенные поляризованные изображения, просматриваемые в поляризованных 3D-очках. В настоящее время этот способ стал стандартом для объёмных фильмов и он действительно достигает наилучших результатов, однако он требует специальных очков, а также специального экрана.

К счастью, основная разница вышеописанных техник состоит в том, как их показывать и смотреть, а не в том, как их снимать. Имея два стереоснимка, вы всегда можете впоследствии изменить способ их объединения по мере развития технологии.

Краткая история GIF: от ранних интернет-новаций до вездесущей реликвии | История

Что общего между Бараком Обамой, ленивцем из Зверополис и медведем, машущим лапой? Все они были названы «самыми популярными в 2016 году» за самый актуальный из интернет-мемов: анимированные GIF-файлы. С момента своего создания 30 лет назад циклические клипы прошли тернистый путь к славе, переходя от вездесущего к отвергнутому и обратно. Любите ли вы их или осуждаете их инфантилизирующее влияние на язык, невозможно долго не видеть их в новостях, социальных сетях или даже в офисных Slack-комнатах. Благодаря скромному формату GIF никакие эмоции не могут быть слишком большими или маленькими, чтобы их можно было запечатлеть в виде анимированного изображения.

Разработчик Стив Уилхайт и его команда из технологического гиганта CompuServe должны были решить проблему: как заставить компьютер отображать изображение, сохраняя при этом память. Это был 1987 год, за четыре года до появления Всемирной паутины, когда пользователи, которые хотели получить доступ к электронной почте или передавать файлы, делали это с почасовой подпиской от таких компаний, как CompuServe. Тогда, как и сейчас, проблемой было пространство. Как можно поделиться файлом цветного изображения, не занимая при этом слишком много памяти компьютера? Уилхайт нашел способ сделать это, используя алгоритм сжатия (подробнее об этом позже) в сочетании с такими параметрами изображения, как количество доступных цветов (256). Его новое творение можно было использовать для обмена изображениями между компьютерами, и он назвал его Graphics Interchange Format. Гифка родилась.

(Для справки: Уилхайт произносит свое творение с мягкой G, используя в качестве демонстрации игру с рекламой арахисового масла: «Разборчивые разработчики выбирают GIF». Webby Awards. Но это вряд ли разрешило спор, так как многие другие настаивают на твердой «g», как в слове «gift», но без «t». Даже словари, такие как Oxford English, бесполезно признали оба произношения действительными.)

Первоначально GIF использовались почти исключительно для неподвижных изображений. Что сделало формат революционным, так это особый алгоритм сжатия, названный Лемпелем-Зивом-Уэлчем в честь трех его создателей (Абрахама Лемепла, Джейкоба Зива и Терри Уэлча). Это работало так: выявляли повторяющиеся шаблоны, а затем упрощали их, позволяя сжимать файлы без потерь — это означает, что ни один из данных не обрезается в процессе сокращения. Как объясняет Эрик Лаймер в Popular Mechanics :

[LZW] позволяет компьютерам изобретать совершенно новую фразу, такую ​​как «blite» пиксель для комбинаций, таких как «синий пиксель, белый пиксель», а также комбинированные фразы, такие как «bliteple» для «бледный пиксель, фиолетовый». пиксель» и так далее, втискивая все больше и больше информации в одно новое слово. Этот подход сделал GIF уникально способным помещать фотореалистичные цветные изображения с их переплетенными цветами в небольшие и практичные пакеты.

В файл было включено несколько вариантов неподвижного изображения, которые можно было соединить вместе для создания зацикленного видео, например, флипбука. Первым примером этого была карта погоды. Но когда разработчики вышли во Всемирную паутину в 1991, они в основном использовали неподвижные изображения. Первой цветной картинкой в ​​сети был даже GIF.

«GIF вскоре стал мировым стандартом, а также сыграл важную роль в интернет-сообществе, — пишет разработчик программного обеспечения Майк Баттилана. «Многие разработчики написали (или приобрели по лицензии) программное обеспечение, поддерживающее GIF, даже не зная о существовании компании CompuServe».

И в этом заключалась одна серьезная проблема: потому что алгоритм LZW, который сделал возможными GIF, на самом деле был запатентован и принадлежал компании под названием Unisys Corp. И в 1995, после многих лет, когда разработчики бесплатно использовали свои GIF-файлы, Unisys внезапно захотела заявить о своем патенте. Они объявили, что будут взимать небольшой гонорар (0,45% и 0,65% для разных продуктов) за программное обеспечение, использующее алгоритм, включая TIFF и PDF, а также GIF. Их патент не истечет до 2003 года в США и до 2004 года во всех остальных странах.

Реакции разработчиков варьировались от практических — создание нового формата файлов с именем PNG (в какой-то момент названного PING для «Ping Is Not Gif»), который не использует алгоритм LZW — до театральных. На последнем конце этого спектра был день «Сжечь все GIF», который состоялся 5 ноября 19 года.99, когда разработчики собрались вместе, чтобы удалить свои GIF-файлы. «День сожжения всех GIF-файлов может стать первым случаем в истории человечества, когда кто-либо счел целесообразным устроить организованный политический протест, пусть даже небольшой, против математического алгоритма», — написал тогда The Atlantic . Несмотря на то, что Unisys просила покупать лицензии только у крупных компаний, а не у отдельных некоммерческих пользователей, разработчики по-прежнему считали патент угрозой.

GIF-изображения были в значительной степени прекращены, особенно потому, что другие форматы файлов теперь лучше справлялись со статическими изображениями. Но никто другой не мог заполнить одну нишу, которую GIF загнал в угол: анимированные изображения. И поэтому, даже когда Интернет развился за пределы раннего HTML, старый обрывочный GIF цеплялся за него изо всех сил.

«Раньше GIF украшали контент, — говорит Джейсон Эппинк, куратор отдела цифровых медиа в Музее движущихся изображений. Он объясняет, что GIF-файлы были графическими изображениями и строительными символами. Но теперь — «сам GIF стал пунктом назначения».

Одна из причин, по которой GIF выжил даже после чистки GIF, как считает Эппинк, заключается в том, что он соответствовал духу «сделай сам» раннего Интернета. Это был небольшой файл, его можно было загрузить и хранить на отдельных серверах, и ничто не могло заменить его стиль анимации: этот короткий, непрерывный, беззвучный цикл.

«Как и большинство цифровых медиа, они удовлетворяют потребность, но в то же время и создают потребность», — говорит Кевин Зенг Ху, научный сотрудник MIT Media Lab. «Мы все знаем, насколько громоздкими могут быть текстовые сообщения и как много контекста может быть утеряно, особенно эмоциональный контекст. Как только вы сделаете это визуальным, у вас будет более высокая пропускная способность для передачи нюансов».

Ху в партнерстве с Трэвисом Ричем в 2014 году создал GIFGIF, проект, направленный на количественную оценку эмоций, исходящих от определенных GIF-файлов. Сайт функционирует почти как преднамеренный тест AB, когда пользователей просят определить, какой из двух GIF-файлов лучше передает эмоцию. На сегодняшний день они получили почти 3,2 миллиона ответов и были впечатлены точностью лучших GIF-файлов для каждой эмоции.

По словам Ху, за годы, прошедшие с начала проекта, GIF-файлы стали лучше индексироваться и их стало легче использовать благодаря таким платформам, как Giphy. Как ни странно, сегодня многие из GIF-файлов, которые можно увидеть на таких сайтах, как Twitter и Imgur, на самом деле являются видеофайлами, которые были закодированы так, чтобы вести себя как GIF, просто потому, что новая видеотехнология более эффективна, чем устаревший формат хранения GIF. «Это своего рода выход за рамки формата файла, чтобы стать названием для этого конкретного культурного мема», — говорит Ху.

Для Eppink еще одним уникальным аспектом GIF-файлов является отсутствие у них авторства и то, насколько они оторваны от исходного материала. Просто потому, что вы знакомы с GIF — скажем, ребенок за старым компьютером показывает вам большой палец вверх — не означает, что вы имеете какое-либо представление о том, откуда взялась эта анимация. «Большую часть времени, когда используются выдержки, они по-прежнему являются собственностью того, из чего они взяты. В GIF-файлах есть что-то интересное, поскольку они становятся самостоятельными объектами», — говорит Эппинк.

На данный момент GIF-файлы защищены от исков об авторском праве доктриной добросовестного использования (которая защищает копирование материалов в ограниченных и преобразующих целях), хотя эта защита не была проверена в суде. В прошлом спортивные ассоциации, такие как НФЛ и конференция «Большой 12» NCAA, отправляли в Твиттер жалобы на аккаунты, использующие GIF-файлы спортивных событий, а Международный олимпийский комитет безуспешно пытался запретить использование GIF-файлов на Олимпийских играх 2016 года.

Несмотря на неопределенность в отношении юридического будущего GIF, это культурная икона с выносливостью. Гифки даже дважды появлялись в Музее движущегося изображения. В 2014 году они организовали инсталляцию на реакционных GIF-файлах, а в июне этого года у них будет еще одна выставка, посвященная анимированным изображениям: GIF-лифту, его стены и потолок покрыты зацикленными картинками, где посетители могут погрузиться в единый, вечный момент.

«Успешный GIF — это тот, которым делятся», — написал Эппинк в статье об истории GIF для журнала Journal of Visual Culture . «Несмотря на то, что отдельные люди обрабатывают пиксели, сообщества создают GIF-файлы».

Получать последние истории историй в свой почтовый ящик?

Нажмите, чтобы ознакомиться с нашим Положением о конфиденциальности.

Рекомендуемые видео

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

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

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

Начнем.

• 1 Краткий обзор
• 2 Загрузите видео 3D Effects for GIF и HTML5 Product Animations Divi Layout БЕСПЛАТНО
• 3 Скачать бесплатно
• 4 Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!
• 5 Использование GIF для коротких анимаций продуктов
• 6 Использование видео HTML5 в качестве замены GIF
• 7 Что вам нужно для этого урока
• 8 Добавление 3D-эффекта к анимированному видео GIF или HTML5
  • 8.1 Создание GIF
  • 8.2 Добавление 3D-эффекта в GIF в Divi
• 9 Добавление 3D-эффекта к видео HTML5 в Divi
  • 9.1 Создание кода для встраивания видео HTML5
  • 9. 2 Встраивание видео HTML5
• 10 Завершение дизайна макета раздела
  • 10.1 Настройка раздела и строки
  • 10.2 Расположение модуля кода
  • 10.3 Добавление модуля призыва к действию
• 11 Конечный результат
  • 11.1 Рабочий стол
  • 11.2 планшет
  • 11.3 Телефон
• 12 Последние мысли

Краткий обзор

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

Загрузите видео 3D Effects for GIF и HTML5 Product Animations Divi Layout БЕСПЛАТНО

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

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

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

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

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

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

Использование видео HTML5 в качестве замены 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:

 перспектива: 1000 пикселей;
 

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

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

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

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

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

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

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

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

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

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

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

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

 <видео>
    
     mp4" type="video/mp4">

 

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

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

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

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

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

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

 <видео>
    
    

 

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

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

 <цикл автовоспроизведения видео с отключенным звуком playsinline>
    
    

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Цвет градиента фона слева: #ba7fe8
Цвет градиента фона справа: #4b84ff

Максимальная высота: 300 пикселей (рабочий стол), нет (планшет и телефон)

Отступы: 0 пикселей сверху, 0 пикселей снизу

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

Box Shadow: см. скриншот
Box Shadow Горизонтальное положение: 0px
Box Shadow Вертикальное положение: 0px
Box Shadow Spread Strength: 40px
Цвет тени: rgba(255,255,255,0.89)

Позиционирование модуля кода

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

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

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

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

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

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

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

Шрифт заголовка: Lato
Вес шрифта заголовка: Жирный
Цвет текста заголовка: #20292f
Основной шрифт: Lato
Цвет основного текста: #6d7c90
Размер основного текста: 17px
Высота основной строки: 1,8em

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

Box Shadow: см. снимок экрана
Box Shadow Вертикальное положение: 0px
Box Shadow Spread Strength: 40px
Цвет тени: rgba(103,151,255,0.