В этой статье будет рассмотрено, как создать полноэкранную видео-презентацию, которая изменяется и анимируется, превращаясь в контент мобильного устройства.
Небольшое введение
В последнее время на сайтах появились видео в полноэкранном режиме, которые помогают "резко" ввести продукт на экран (или особенность приложения).
В этой статье мы попытались создать нечто подобное, в виде простого шаблона приложения. С помощью некоторых хитростей CSS (в основном CSS-преобразований и анимации), мы создали видео-введение, которое превращается в контент для мобильного устройства.
Некоторые из сложности возникли при выборе правильных подходов и обработки загрузки анимации. Мы знаем, что показывать загрузчик сразу же не очень хорошо. Поэтому, прежде чем использовать этот шаблон, вы должны рассмотреть:
- будет ли видео увеличивать ваши продажи или нет?
- ожидаете ли вы, что на сайт будут часто заходить постоянные посетители, или же цель состоит только в том , чтобы позволить пользователю загрузить приложение, после чего он (почти) никогда не вернется на ваш сайт?
Если ответы на эти вопросы:
- ДА и
- Нет,
тогда этот шаблон пригодится для вас 🙂
Материалы для шаблона
Видео с сайта pexels.com
Вдохновение: Landing Page от Cuberto
Иконки от Nucleo
Создание структуры
HTML-структура состоит из двух основных элементов: div.product-intro (название продукта, кнопка действия - action button, ..) и div.product-preview - превью для изображения / видео-превью продукта..
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<div class="cd-immersive-video"> <div class="intro-wrapper"> <div class="product-intro"> <div> <h1 class="item item-1">Immersive Video Template</h1> <p class="item item-2"> <!-- product description here --> </p> <a href="#0" class="cd-btn item item-3">Download & Article</a> </div> </div> <!-- .product-intro --> <div class="product-preview no-transition"> <div class="device-frame"> <img src="assets/img/mobile-frame.svg" alt="Device Frame"> </div> <div class="product-image"> <img src="assets/img/video-fallback.jpg" alt="Product Preview"> </div> <div class="product-video" data-video="assets/video/video.mp4"> <div class="video-wrapper"> <!-- video will be insereted here using js --> </div> </div> </div> <!-- .product-preview --> </div> <div class="cd-loader"></div> </div> <!-- .cd-immersive-video --> |
Видео не напрямую вставляется в HTML, но он загружен с помощью JavaScript.
Добавление стилей
На небольших устройствах (ширина окна меньше, чем 800px), CSS довольно прост: как div.product-intro, так и div.product-preview изначально скрыты (opacity: 0), а затем они появляются, используя анимацию с именем cd-item-move-up.
|
1 2 3 4 5 6 7 8 9 10 |
@keyframes cd-item-move-up { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0); } } |
Превью видео-продукта не загружается на этих устройствах, в то время как изображение используется как предварительный просмотр продукта (div.product-image > img).
Для бОльших устройств, интро-продукт (div.product-intro) и предварительный просмотр изначально скрыты; После того, как видео для предварительного просмотра было загружено (больше в разделе Обработка событий), класс .video-is-loaded используется для показа контента и запуска видео-анимации.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@media only screen and (min-width: 800px) { .cd-immersive-video .intro-wrapper { /* пока загружается видео - контент спрятан */ visibility: hidden; opacity: 0; transition: opacity 1.5s, visibility 1.5s; } .cd-immersive-video.video-is-loaded .intro-wrapper { /* видео уже загрузилось - отображаем контент */ visibility: visible; opacity: 1; } } |
Для анимации видео: div.product-video изначально увеличивается в масштабе (с помощью JavaScript), чтобы охватить весь экран. После того как видео воспроизводится в течение около 1 секунды, то div.product-video уменьшается в масштабе и смещается вправо. div.product-intro затем анимируется с использованием класса .animate-content: каждый элемент интро (h1, р ..) появляется с помощью анимации cd-item-slide-in с различной задержкой анимации.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@media only screen and (min-width: 800px) { .cd-immersive-video .product-intro .item { opacity: 0; } .cd-immersive-video .product-intro.animate-content .item { animation: cd-item-slide-in .4s both; } .cd-immersive-video .product-intro.animate-content .item-1 { animation-delay: .1s; } .cd-immersive-video .product-intro.animate-content .item-2 { animation-delay: .2s; } .cd-immersive-video .product-intro.animate-content .item-3 { animation-delay: .3s; } } |
Обработка событий
Для больших устройств мы используем jQuery, чтобы загрузить видео для предварительного просмотра продукт и вставить его в структуру HTML-кода. Для этого будем использовать событие canplaythrough для обнаружения готовности видео к воспроизведению. Также нужно добавить проверку события readyState для видео (если видео кэшируется, событие canplaythrough не может быть обнаружено и обработано).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
if( productVideo.is(':visible') ) { //productVideo = $('.product-video'); // источником видео будет атрибут the data-video в productVideo var video = $('<video><source src="'+productVideo.data('video')+'" type="video/mp4" />Sorry, your browser does not support HTML5 video.</video>'); //проверка, произошло ли событие canplaythrough - видео готово к воспроизведению video.on('canplaythrough', function() { video.off('canplaythrough').trigger('readyToPlay'); }); // если видео закэшировалось, событие 'canplaythrough' нельзя обработать if (video.get(0).readyState > 3) { video.off('canplaythrough').trigger('readyToPlay'); } } |
Когда видео готово к воспроизведению, вставляем его в нашу HTML-структуру и одновременно прячем предзагрузчик, а также запускаем анимацию видео.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
video.on('readyToPlay', function(){ //видео готово к воспроизведению video.appendTo(productVideo.find('.video-wrapper')); //ждем окончания анимации и отображаем видео loader.one(animationIteration, function() { loader.addClass('no-animation').off(animationIteration); //убедимся, что transition была применена (при использовании класса scale-down) //https://css-tricks.com/restart-css-animation/ void loader.get(0).offsetWidth; loader.addClass('scale-down'); loader.on(transitionEnd, function(){ loader.off(transitionEnd); //анимируем div.product-video immersiveVideoWrapper.trigger('startAnimation'); }); }); }); |
Источник - Immersive Video Template
Отличный вариант видеопрезентации!
Надо будет попробовать со своим видео.
Браво, отличная презентация. Жаль, что статья переводная.
Наших бы таких побольше.
Очень круто! Надо будет где-нибудь это использовать!
Спасибо! Классный урок.
Очень понравилась анимация!