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

 

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

Шаг 1. HTML

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

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

Шаг 2. CSS

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

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

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

Шаг 3. JS

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

После того, как видео будет готово, мы вставить его в HTML, а затем запускать видео анимацию.

Вот и все. Готово!

Читайте также: