Автор

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

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


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

 

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

 

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

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

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


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

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


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

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


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

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close