Автор

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

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


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

 

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

 

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

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

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


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

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


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

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


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

Хочу в данной статье немного расказать о создании нового сайта Image Club «PLATINUM» г.Саратов. Чтобы описать чем занимается Image Club, я приведу высказывания владелицы клуба Татьяны Бычковой:

«Почему «имидж клуб»? В основном, смена имиджа ассоциируется с началом новой жизни. Но поменять одну модную вещь на другую это не значит, что вы поменяли свой имидж. Начинать нужно со своего внутреннего мира, со своего взгляда на окружающий мир, работать не только над дефектами своей фигуры, и учиться правильно одеваться, но и получать от этого огромное достойное Вас (платиновое) удовольствие.»


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close