Автор

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

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


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

 

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

 

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

 

Вот и всё!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

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

Простая 3D-анимация для ваших элементов галереи, чтобы пользователи могли легко узнать больше о ваших продуктах, не покидая страницу.


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

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


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

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


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

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


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close