Шаблон для внедрения мобильного приложения

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

 

ДЕМО
ИСХОДНИКИ

 

Видео - один из самых эффективных способов представления приложения аудитории. Пользователи часто хотят увидеть, как работает приложение, даже не решив, загружать его или нет. Скриншот мог бы сделать работу, но с движением, являющимся фундаментальной частью сегодняшнего пользовательского опыта приложений, анимированный 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.

 

Вот и всё!


Top

🔖 Выбор по тегам ×

💌 Написать сообщение ×

Все поля обязательны для заполнения!