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

Сегодня мы делаем полный JQuery и CSS сайт вымышленных мобильных устройств. Демо и исходники.

Тут основная особенность семантической разметки и мощного слайд-шоу который даёт силу и изящность сайту. +Это позволит пользователю увидеть четыре из самых популярных смартфонов на мобильные приложения.

Шаг 1 - XHTML

При создании сайтов важно, что вы пишите свой код в семантическом образом. Вы должны использовать заголовки глав, пунктов для текста (а не общий DIV-ов) и списки, где это применимо.

<div id="page">

    <h1 id="logoh1">a href="/" id="logo">
    MobileApp - the most useful mobile app!</a></h1>

    <div id="phoneCarousel">
    	<div class="previous arrow"></div>
        <div class="next arrow"></div>

        <div id="stage">
            <img id="iphone" class="default"
            src="img/phones/iphone.png" 
            width="270" height="400" alt="iPhone" />
            <img id="nexus" src="img/phones/nexus_one.png" 
            width="270" height="400" alt="Nexus One" />
            <img id="nokia" src="img/phones/nokia.png" 
            width="270" height="400" alt="Nokia" />
            <img id="blackberry" src="img/phones/blackberry.png" 
            width="270" height="400" alt="BlackBerry" />
        </div>
    </div>

    <img class="availableAppStore" 
    src="img/available_on_the_appstore.png" 
    width="230" height="80" alt="Available on the Appstore" />

    <div class="text">
    	<h3><img src="img/thumb.png" alt="MobileApp" 
    	width="114" height="114" 
    	class="thumb" />A wonderful app</h3>
        <p>Lorem ipsum dolor sit amet.. </p>
    </div>

    <div class="text">
    	<h3><img src="img/thumb.png" alt="MobileApp" 
    	width="114" height="114" class="thumb" />
    	More awesome facts</h3>
        <p>Lorem ipsum dolor sit amet.. </p>
    </div>

</div>

Это все разметки, который используется для отображения веб-сайте. H1 заголовок имеет гиперссылку которая оформлена в стиле логотипа (логотип выбран в качестве фона гиперссылки и отрицательные абзац текста используется, чтобы скрыть текст ссылки).

После этого у нас есть #phoneCarousel Div и внутри него стрелки. Изображения телефона внутри вращаются с JQuery, как вы увидите далие.

Шаг 2 - CSS

CSS отвечает за преобразование нашей семантической разметки в настоящий веб-сайт. Присмотритесь на стадии #стилей во второй части кода, а вот то, что делает возможным анимации.

/*styles.css - Часть 1*/

body{
	font-size:14px;
	color:#515151;
	background:url('img/bg.png') repeat-x #f6f8f9;
	font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
}

#logoh1{ margin:40px 0 0;}

#page{
	/* Это основные Div контейнер */
	width:1000px;
	min-height:700px;
	margin:0 auto;
	background:url('img/bokeh.jpg') no-repeat 0 120px;
	position:relative;
	padding-top:1px;
}

#phoneCarousel{
	/*	Это карусель,
			содержит изображения и стрелки */
	height:390px;
	margin:90px auto 120px;
	position:relative;
	width:800px;
}

#phoneCarousel .arrow{
	/* 2 стрелки */
	width:44px;
	height:44px;
	background:url('img/arrows.png') no-repeat;
	position:absolute;
	top:50%;
	margin-top:-22px;
	left:0;
	cursor:pointer;
}

#phoneCarousel .next{
	/* Индивидуальные стили на следующий значок */
	background-position:right top;
	left:auto;
	right:0;
}

/* Hover ситиль */

#phoneCarousel .arrow:hover{
	background-position:left bottom;
}

#phoneCarousel .next:hover{
	background-position:right bottom;
}

После определения стилей body, мы можем перейти к дизайну страницы #page DIV, который содержит все вместе. В качестве фона изображения компенсируется 120px по вертикали, наполняя всю ширину страницы.

Далее идет # phoneCarousel div. Это относительное позиционирование применяется там (где все анимации состоит) может быть надлежащим образом в центре. а также стили стрелок Предыдущей / следующей .

/*styles.css - Часть 2*/

#logo{
	background:url('img/logo.png') no-repeat;
	height:40px;
	text-indent:-9999px;
	width:210px;
	display:block;
}

#stage{
	/* содержит анимированные изображения телефона */
	left:50%;
	margin-left:-350px;
	position:absolute;
	width:700px;
	height:100%;
}

#stage img{
	/* Скрытие всех изображений по умолчанию */
	display:none;
}

#stage .default{
	/*	Этот класс применяется только для iphone IMG по умолчанию
	/ и это только один видимый, если JS отключен */
	display:block;
	left:50%;
	margin-left:-135px;
	position:absolute;
}

#stage .animationReady{
	/* Этот класс присваивается при загрузке изображений */
	display:block;
	position:absolute;
	top:0;
	left:0;
}

.text{	margin-top:70px;width:700px;}

.text p,
.text h3{
	padding-bottom:15px;
	line-height:1.4;
	text-align:justify;
}

.text h3{	font-size:30px;}
.text p{	font-size:20px;}

.thumb{	float:left;margin-right:40px;}

.availableAppStore{float:right;}

Во второй части таблицы стилей, мы продолжаем стиль #stage. Фотографии телефона по умолчанию скрыты, так что если JavaScript отключен, пользователь не осталось куча рассеянного изображения. Как вы увидите в следующем шаге, анимации достигается за счет изменения верхней и левой CSS свойствами. Чтобы это работало, изображения должны быть абсолютным позиционированием. Вот почему .AnimatonReady класс присваивается при загрузке с JQuery (если JS отключен, этот стиль не будет применяться).

Наконец, мы закончили стиле текстовых блоков, которые объясняют подробную информацию о вымышленной MobileApp.

Шаг 3 - JQuery

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

$(document).ready(function(){

	var deg=0;

	/* Сохранение всех изображений в переменную */

	var images = $('#stage img').removeClass('default').
	    addClass('animationReady');
	var dim	= { width:images.width(),height:images.height()};

	var cnt = images.length;

	/* Поиск центра анимации контейнера: */
	var centerX = $('#stage').width()/2;
	var centerY = $('#stage').height()/2 - dim.height/2;

	function rotate(step,total){
		// Эта функция будет циклом через все 
		// изображения телефонов, а также вращать их
		// с "шагом" градусы уменьшаються 
		// (с 10 в данной реализации) до полного> 0

		/* Прирост степени: */
		deg+=step;

		var eSin,eCos,newWidth,newHeight,q;

		/* Цикл по всем изображениям: */
		for(var i=0;i<cnt;i++){

		/* Вычислить синус и косинус 
		/ для 1-го изображения */

		q = ((360/cnt)*i+deg)*Math.PI/180;
		eSin = Math.sin(q);
		eCos = Math.cos(q);

		/*
		/	С синус значение, мы можем рассчитать 
		/   вертикальное движение,
		/	и косинус даст нам горизонтальное движение.
		*/

		q = (0.6+eSin*0.4);
		newWidth = q*dim.width;
		newHeight = q*dim.height;

		/*
		/	Мы используем расчетные синус значения 
		/   (которое находится в диапазоне
		/	от -1 до 1) для расчета.
		/	frontmost изображение значение синуса 1, 
		/	а самый нижней имеет синус значение -1.
		*/

		// eq() извлекает изображения на I-е место:

		images.eq(i).css({
			top			: centerY+15*eSin,
			left		: centerX+200*eCos,
			opacity		: 0.8+eSin*0.2,
			marginLeft	: -newWidth/2,
			zIndex		: Math.round(80+eSin*20)
		}).width(newWidth).height(newHeight);
		}

		total-=Math.abs(step);
		if(total<=0) return false;

		// Установка функции будет заходить на очередной 
		//срок в 40 миллисекунд (составляет 25 кадров в секунду):
		setTimeout(function(){rotate(step,total)},40);

	}

	// Запуск анимации 1 раз во время загрузки 
	//(и движущиеся iPhone в поле зрения)
	rotate(10,360/cnt);

	$('#phoneCarousel .previous').click(function(){
		// 360/cnt позволяет нам распространять 
		//телефоны равномерно по кругу
		rotate(-10,360/cnt);
	});

	$('#phoneCarousel .next').click(function(){
		rotate(10,360/cnt);
	});
});

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

В коде, вы можете увидеть, что я использовал конкретные расчеты - 360/cnt. Это делается, чтобы распределять равномерно телефоны (360 это количество градусов в круге). Таким образом, вы можете добавить или удалить изображения, и они будут должным образом анимированы.

При этом раскладе наш MobleApp сайт готов!