Автор

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

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

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


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

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


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

Мы столкнулись с интересной задачей, а именно реализацией эффекта "до-после" для изображений, данный эффект позволяет наглядно продемонстрировать какие изменения были произведены с изображением с помощью разделительной линии. Для этого нам понадобиться небольшой плагин TwentyTwenty.js работа которого будет обеспечиваться с помощью двух библиотек jQuery. Эффект достаточно простой, но отлично справляется с поставленной задачей. Такой эффект станет отличным дополнением до сайта фотографа.


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close