Вы здесь: Главная » HTML » Полноэкранная видео-презентация

Полноэкранная видео-презентация

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

Небольшое введение

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

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

video-template

Некоторые из сложности возникли при выборе правильных подходов и обработки загрузки анимации. Мы знаем, что показывать загрузчик сразу же не очень хорошо. Поэтому, прежде чем использовать этот шаблон, вы должны рассмотреть:

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

Если ответы на эти вопросы:

  1. ДА и
  2. Нет,

тогда этот шаблон пригодится для вас 🙂

Материалы для шаблона

Видео с сайта pexels.com
Вдохновение: Landing Page от Cuberto
Иконки от Nucleo

Создание структуры

HTML-структура состоит из двух основных элементов:  div.product-intro (название продукта, кнопка действия - action button, ..) и div.product-preview - превью для изображения / видео-превью продукта..

Видео не напрямую вставляется в HTML, но он загружен с помощью JavaScript.

Добавление стилей

На небольших устройствах (ширина окна меньше, чем 800px), CSS довольно прост: как div.product-intro, так и div.product-preview изначально скрыты (opacity: 0), а затем они появляются, используя анимацию с именем cd-item-move-up.

Превью видео-продукта не загружается на этих устройствах, в то время как изображение используется как предварительный просмотр продукта (div.product-image > img).

Для бОльших устройств, интро-продукт (div.product-intro) и предварительный просмотр изначально скрыты; После того, как видео для предварительного просмотра  было загружено (больше в разделе  Обработка событий),  класс .video-is-loaded  используется для показа контента и запуска видео-анимации.

Для анимации видео: div.product-video изначально увеличивается в масштабе (с помощью JavaScript), чтобы охватить весь экран. После того как видео воспроизводится в течение около 1 секунды, то div.product-video уменьшается в масштабе и смещается вправо. div.product-intro затем анимируется с использованием класса .animate-content: каждый элемент интро (h1, р ..) появляется с помощью анимации cd-item-slide-in  с различной задержкой анимации.

Обработка событий

Для больших устройств мы используем jQuery, чтобы загрузить видео для предварительного просмотра продукт  и вставить его в структуру HTML-кода. Для этого будем использовать событие canplaythrough  для обнаружения  готовности видео  к воспроизведению. Также нужно добавить проверку события readyState для видео (если видео кэшируется, событие canplaythrough  не может быть обнаружено и обработано).

Когда видео готово к воспроизведению, вставляем его в нашу HTML-структуру и одновременно прячем предзагрузчик, а также запускаем анимацию видео.

Скачать файлы шаблона

Посмотреть демо

Источник - Immersive Video Template

Besides, sites can have language versions of Russian, English and others.

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

  1. Спасибо! Классный урок.

    Очень понравилась анимация!

  2. Очень круто! Надо будет где-нибудь это использовать!

  3. Браво, отличная презентация. Жаль, что статья переводная.
    Наших бы таких побольше.

  4. Отличный вариант видеопрезентации!
    Надо будет попробовать со своим видео.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *