Базовый шаблон для демонстрации лучших функций вашего приложения, обогащенный слайдером видео для лучшего понимания пользователями.
Видео - один из самых эффективных способов представления приложения аудитории. Пользователи часто хотят увидеть, как работает приложение, даже не решив, загружать его или нет. Скриншот мог бы сделать работу, но с движением, являющимся фундаментальной частью сегодняшнего пользовательского опыта приложений, анимированный gif и видео элементы имеют значение.
Поэтому мы создали настраиваемый, адаптивный шаблон, который превращается в слайдер видео на рабочем столе;)
Примечание!
Все видео в демонстрационной версии были созданы в Adobe After Effects и экспортированы в формате .mp4 с помощью Adobe Media Encoder. В то время как приложение Miro Video Converter использовалось для получения формата видео .webm.
Создание структуры
HTML структурирован в 2 основных элемента <div>
(.cd-product-intro
и #cd-product-tour
) - первый содержит приложение intro (название, кнопки действий ..), а второе приложение имеет завернутый слайдер Внутри элемента <main>
.
<main class="cd-main-content">
<div class="cd-product-intro">
<h1><!-- app name --></h1>
<p><!-- brief description --></p>
<div class="cd-triggers">
<a href="#0" class="btn">Download</a>
<a href="#cd-product-tour" class="btn salmon" data-type="cd-tour">Start</a>
</div>
</div> <!-- cd-product-intro -->
<div id="cd-product-tour">
<ul>
<li class="cd-single-item cd-active">
<!-- single slider content -->
</li>
<!-- ..... -->
</ul>
</div> <!-- cd-product-tour -->
</main>
Ползунок приложения представляет собой неупорядоченный список: каждый элемент списка содержит элемент .cd-caption
(название и описание элемента) и элемент .cd-image-container
(изображение функции / видео).
<div id="cd-product-tour">
<ul>
<li class="cd-single-item cd-active">
<div class="cd-caption">
<h2><!-- Feature title --></h2>
<p><!-- Feature description --></p>
</div>
<div class="cd-image-container">
<div>
<div class="cd-phone-frame"></div> <!-- this is the external phone -->
<div class="cd-image-wrapper">
<img src="img/screen-1.png" data-video="video/video-1">
</div>
</div>
</div>
</li>
<!-- ... -->
</ul>
</div> <!-- cd-product-tour -->
Видео не вставлено непосредственно в структуру HTML, но будет загружено с помощью jQuery.
К main.cd-main-content
добавлены два дополнительных элемента <div>
(.cd-slider-nav
для приложения, включающие слайдерную навигацию и .cd-loader
для верхней панели загрузки).
Добавление стиля
На небольших устройствах CSS довольно прост (вы можете проверить код для получения дополнительной информации / комментариев).
На настольных устройствах (ширина окна просмотра более 1070 пикселей) мы присвоили position: absolute
и ширина: 50% к .cd-product-intro
и разместили ее в левой части экрана.
Для элемента #cd-product-tour
мы устанавливаем width: 100%
и left: 0
, но назначаем его translateX (75%)
, чтобы было видно только изображение телефона.
@media only screen and (min-width: 1070px) {
.cd-product-intro {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 10%;
width: 50%;
transition: transform 0.3s, opacity 0.3s;
}
#cd-product-tour {
width: 100%;
max-width: 850px;
margin: 0 auto;
top: 50%;
left: 0;
transform: translateY(-50%) translateX(75%);
transition: transform 0.3s;
}
}
Вот изображение, показывающее исходное расположение компонентов шаблона:
Когда пользователь нажимает кнопку «Пуск», мы добавляем класс .is-product-tour
в элемент .cd-single-item: translateX(-50%)
назначается для .cd-product-intro
(чтобы скрыть его от Viewport) и translateX (0)
в тур #cd-product-tour
(так, чтобы были видны как .cd-caption
, так и .cd-image-container
). Для достижения плавной анимации были добавлены CSS3-переходы к значениям трансформирования и непрозрачности.
Что касается элементов li.cd-single-item
, мы присвоили им положение: absolute
, a width: 100%
и left: 0
(они занимают одно и то же место) и использовали свойство видимости и непрозрачности, чтобы отображать только активный ползунок.
@media only screen and (min-width: 1070px) {
.cd-single-item {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 100%;
visibility: visible;
}
.cd-single-item.cd-not-visible {
/*need to create a specific class to change visibility value due to a Firefox bug*/
/*CSS transition/animation fails when parent element changes visibility attribute*/
visibility: hidden;
}
.cd-single-item .cd-caption {
width: 60%;
float: right;
opacity: 0;
transition: transform 0.3s, opacity 0.3s;
}
.is-product-tour .cd-single-item.cd-active .cd-caption {
opacity: 1;
}
.cd-single-item.cd-move-right .cd-caption {
transform: translateX(100px);
}
.cd-image-container {
width: 35%;
float: left;
}
.cd-image-container img {
transition: transform 0.3s;
transform: translateZ(0);
}
.cd-move-right .cd-image-container img {
transform: translateX(100%);
}
}
Обратите внимание: мы устанавливаем высоту: 100% для <body>
и <html>
, чтобы иметь полный контент страницы.
Обработка событий
Видеоролики, показывающие функции приложения, не вставляются непосредственно в HTML, а загружаются, только когда соответствующий слайдер отображается в первый раз. Видео данных выбранного изображения слайдера используется для извлечения URL-адреса видео. Для поддержки всех браузеров были использованы два видеоформата: .mp4 и .webm. Как только видео вставляется в HTML, начинается анимация загрузочной панели. Когда видео готово для воспроизведения (происходит событие canplaythrough)
, анимация загрузочной панели завершается и воспроизводится видео.
function uploadVideo(selected) {
// selected is the .cd-single-item.cd-active slider element
selected.siblings('.cd-single-item').find('video').each(function(){
//pause videos user is not watching
$(this).get(0).pause();
})
if(selected.find('video').length > 0) {
//video has been already loaded - play it
selected.find('video').eq(0).show().get(0).play();
} else {
//load video - the name of the video is the data-video of the image
var videoUrl = selected.find('.cd-image-container img').data('video'),
video = $('');
video.appendTo(selected.find('.cd-image-wrapper')).hide();
var loaded = 'false';
//check if the canplaythrough event occurs - video is ready to be played
selected.on('canplaythrough', 'video', function() {
loaded = 'true';
});
//animate the loading bar
$('.cd-loader').show().animate({width: '50%'}, 1500, function(){
var timeout = setInterval(function(){
if( loaded ){
//this means the video is ready - complete .cd-loader and play the video
$('.cd-loader').animate({width: '100%'}, 100, function(){
$('.cd-loader').css('width', 0);
selected.find('video').show().get(0).play();
selected.find('img').css('opacity', 0);
clearInterval(timeout);
});
} else {
//video is not ready yet
var windowWidth = $(window).width(),
widthNew = $('.cd-loader').width() + 10;
if(widthNew < windowWidth ) {
$('.cd-loader').show().animate({width: widthNew+'px'}, 500);
}
}
}, 500);
});
}
}
Одно важное замечание:
Если вы проверите код, вы увидите, что видео, которые мы использовали, имеет коэффициент сжатия больше 1 (ширина> высота). Видео вставляются в HTML, а затем поворачиваются (90 градусов), используя поворот CSS3, чтобы соответствовать рамке телефона (неудобно, я знаю!). На самом деле мы начали использовать видео с соотношением сторон меньше 1 (такое же соотношение сторон телефона), но они не показывались в IE 9+. Похоже, (или, по крайней мере, это тот вывод, который мы написали после некоторых попыток). IE (9+) имеет проблемы с видеороликами с соотношением сторон меньше 1.