Технология Flash все реже и реже используется для интерактивных элементов web-страниц. Это происходит благодаря развитию технологии CSS и появлению различных JS библиотек. Одной из таких библиотек является jQuery. Ее функционал позволяет легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Рассмотрим использование некоторых функций jQuery на примере создания слайд-шоу.

Но прежде чем писать скрипты, давайте сначала определимся со структурой нашего слайд-шоу и опишем ее с помощью HTML.

Как мы видим на рисунке, наше слайдшоу представляет собой выстроенные в один ряд изображения и стрелки прокрутки. Опишем данную структуру следующим HTML кодом:

<div id="gallery">
	<div class="container">
		<ul>
			<li><img src="img/img01.jpg" /></li>
			<li><img src="img/img02.jpg" /></li>
			<li><img src="img/img03.jpg" /></li>
			<li><img src="img/img04.jpg" /></li>
		</ul>
	</div>
	<div class="nav prev"><a href="#" title="назад">назад</a></div>
	<div class="nav next"><a href="#" title="вперед">вперед</a></div>
</div>

Здесь роль стрелок навигации у нас будут выполнять ссылки «назад» и «вперед», а списком изображений будет служить список, расположенный в блоке с классом container.

Теперь перейдем к описанию CSS. Так как блок нашего слайд-шоу должен быть по ширине резиновым, присваиваем всем блокам, лежащим внутри внешнего блока gallery свойство float: left, тем самым выстраивая их в один ряд. Затем блок с изображениями делаем на всю ширину родительского блока, стрелку «назад» отодвигаем влево на величину ширины родительского блока, а стрелку «вперед» отодвигаем влево на свою ширину. Ширина стрелок навигации у нас будет равна 40 px. Для того чтобы лучше понять наши манипуляции взгляните на рисунок.

Теперь займемся списком с изображениями. Наша задача расположить их в ряд, но так чтобы он не переносился на другую строку, если его длина будет больше чем длина родительского блока. Для этого присвоим списку свойства white-space: nowrap и overflow: hidden. Первое запретит перенос дочерних элементов на следующую строку, а второе скроет элементы, выходящие за ширину списка. Элементам списка присвоим, в свою очередь свойства display: inline тем самым разместив их в горизонтальный ряд подобно обычному тексту.

Настала очередь заняться стилизацией стрелок навигации. Делаем их размеры такие же, как и родительский блок и скрываем текст внутри них. Открываем любой графический редактор и делаем изображения стрелок «назад» и «вперед». У меня получились вот такие:

После всех манипуляций у нас получается следующий код CSS:

#gallery div.container {
	width: 100%;
	float: left;
	overflow: hidden;
}
 
#gallery ul {
	overflow:hidden;
	list-style:none;
	margin:0;
	padding:0;
	white-space:nowrap;
	width:100%;
}
 
#gallery ul li {
	display:inline;
}
 
#gallery div.nav {
	float:left;
	height:150px;
	width:40px;
}
 
#gallery div.prev {
	margin-left: -100%;
}
 
#gallery div.next {
	margin-left: -40px;
}
 
#gallery div.nav a {
	display:block;
	width:100%;
	height:100%;
	overflow:hidden;
	text-indent:-1000px;
	opacity:0.5;
	filter: alpha(opacity = 50);
}
#gallery div.prev a {
	background:url(prev.png) no-repeat center center #eee;
}
 
#gallery div.next a {
	background:url(next.png) no-repeat center center #eee;
}
 
#gallery div.nav a:hover {
	opacity:0.7;
	filter: alpha(opacity = 70);
}

Обратите внимание на то, что в описании стиля ссылок есть два свойства: opacity и filter. Задача у них двоих одинаковая: задать прозрачность элементу. Второй параметр необходим корректного отображения в браузере IE, т.к. свойство opacity он не понимает.

Если вы в коде HTML делали пункты списка с изображениями делали каждый на отдельной строке, то вы могли заметить что между изображениями есть пробелы. Их наличие обусловлено тем, что элементы списка воспринимаются как строчные элементы, а переход на новую строку воспринимается как пробел. От этих пробелов можно 2-мя способами:

• С помощью CSS-свойства word-spacing, присвоив ему отрицательную ширину пробельного символа. Недостаток этого способа состоит в том, что у каждого размера и типа шрифта эта величина разная и вам нужно будет экспериментально каждый раз подбирать ее.
• Убрать лишние символы между элементами списка: вручную или с помощью JS. Данный метод является более предпочтительным, тем более недостатков у него я не вижу.

Итак, структура слайд-шоу готова, осталось только заставить ее двигаться. Суть пролистывания изображений заключается в динамическом изменении CSS-свойства text-indent у списка, в котором они находятся. Задавая свойству положительное значение, мы сдвигаем дочерние элементы вправо, отрицательное значение — влево. Для того чтобы прокрутить весь список до конца его нужно сместить влево на разницу значений ширины этого списка элементов и ширины родительского элемента. Эти величины можно получить из DOM свойств объекта. Свойство scrollWidth определяет ширину списка элементов в объекте, а clientWidth — ширину самого объекта.

Разностью этих величин у нас будет параметр width:

var width = $("#gallery ul").attr("scrollWidth") - $("#gallery ul").attr("clientWidth");

Для динамического изменения свойства text-indent нам идеально подходит функция jQuery animate (). Она позволяет осуществлять анимацию списка CSS-свойств за заданный промежуток времени. Полное описание с примерами можно прочитать на сайте jQuery. Какое CSS-свойство изменять, мы уже определили, осталось разобраться со временем, за которое будет происходить анимация – для этого заведем переменную elapsed. Чтобы каждый раз не подбирать необходимое время для прокрутки всех изображений просто возьмем ширину списка элементов и умножим на некий коэффициент – переменная factor. Чем больше значение коэффициента – тем медленней будет осуществляться прокрутка.

var factor = 2.5;
var elapsed = width * factor;

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

$("#gallery .prev").mouseenter ( function () {
	$("#gallery ul").stop(true);
	indent = - parseInt ( $("#gallery ul").css("text-indent") );
	$("#gallery ul").animate({ textIndent: 0}, elapsed - ( width - indent ) * factor );
});
 
$("#gallery .next").mouseenter ( function () {
	$("#gallery ul").stop(true);
	indent = - parseInt ( $("#gallery ul").css("text-indent") );
	$("#gallery ul").animate({ textIndent: -width}, ( width - indent ) * factor );
});

Как вы могли заметить, в коде мы используем еще одну функцию jQuery — stop (). Она предназначена для остановки, происходящей в данное время анимации элемента. Ей мы передаем один параметр, который означает, что мы хотим очистить очередь анимации. Так же, у нас появляется переменная indent в которую мы записываем текущее значение СSS-свойства text-indent. Эта величина нам понадобится при расчете времени, которое потребуется на анимацию CSS-свойства при его текущем значении.

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

$("#gallery .prev").mouseleave ( function () {
	$("#gallery ul").stop(true);
});
 
$("#gallery .next").mouseleave ( function () {
	$("#gallery ul").stop(true);
});

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

if ($.browser.webkit && document.readyState != "complete"){
	setTimeout( arguments.callee, 100 );
	return;
}

Он проверяет браузер и состояние готовности страницы. Если движок браузера Webkit и состояние готовности не является «complete», то весь JS-код запускается повторно через 100 мс.

Теперь наше слайд-шоу работает как надо во всех браузерах, но есть еще одна вещь, которой, как мне кажется, не хватает – плавность прокрутки, особенно когда при ее остановке. Давайте сделаем этот процесс более плавным. Для этого нам потребуется специальная библиотека jQuery UI. Она обеспечивает работу с анимацией, эффектами, интерфейсом и всевозможными виджетами. Для нашей задачи нужны функции характера воспроизведения анимации – easing. На странице вы можете наглядно увидеть как работает каждая функция воспроизведения и выбрать подходящую. Эта функция затем передается параметром функции animate. Я выбрал для примера easeOutQuad. Допишем наши функции для прекращения анимации:

$("#gallery .prev").mouseleave ( function () {
	$("#gallery ul").stop(true);
	indent = - parseInt ( $("#gallery ul").css("text-indent") );
 
	if ( indent > widthStop )
		$("#gallery ul").animate({ textIndent: "+="+widthStop }, widthStop * factorStop, "easeOutQuad" );
	else if ( indent > 0 )
		$("#gallery ul").animate({ textIndent: 0 }, indent * factorStop, "easeOutQuad" );
});
 
$("#gallery .next").mouseleave ( function () {
	$("#gallery ul").stop(true);
	indent = - parseInt ( $("#gallery ul").css("text-indent") );
	var delta = width - indent;
	if ( delta > widthStop )
		$("#gallery ul").animate({ textIndent: "-="+widthStop }, widthStop * factorStop, "easeOutQuad");
	else if ( delta > 0 )
		$("#gallery ul").animate({ textIndent: -width }, delta * factorStop, "easeOutQuad");
});

Здесь я добавил еще два параметра: widthStop – ширина «тормозного пути», и factorStop — коэффициент для определения времени анимации торможения. В каждой из функций сначала находится текущее значение свойства text-indent, а затем выполняется проверка: больше ли это значение «тормозного пути». Это сделано для того, чтобы не выйти за диапазон прокрутки.

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

Скачать рабочий пример.

• Прежде чем приступить к верстке, следует детально изучить элементы во всех предоставленных шаблонах и найти схожие по стилю блоки. Это позволит в разы сократить CSS.

• Отслеживать процесс верстки лучше всего в самом проблемном браузере. На данный момент таковым является IE6

• Ключевым и уникальным блокам на странице следует присваивать идентификатор, а в css описании отталкиватся от идентификатора. Это позволит использовать одинаковые имена классов в разных блоках.

  Пример:

  <div id="maincol">
  	<div class="block">
  		<p>В css описании следует отталкиватся от 
  		идентификатора. Это позволит использовать 
  		одинаковые имена классов в разных блоках.</p>
  	</div>
  </div>

  не правильно: div.block { /* описание свойств ... */ }

  правильно: #maincol div.block { /* описание свойств ... */ }

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

  Пример:

  не правильно: <div class="usefull_tips"> <div class="tip"> <p>Абстрактные имена классов вносят меньше путаницы.</p> </div> </div>

  правильно: <div class="items"> <div class="item"> <p>Абстрактные имена классов вносят меньше путаницы.</p> </div> </div>

• Старайтесь использовать связные классы для схожих по стилю блоков.

  Пример:

  не правильно: HTML: <div class="type1"> <p>С помощью связных классов можно сократить размер CSS-файла.</p> </div>   <div class="type2"> <p>Чем меньше дублирующих блоков в CSS-файле - тем лучше</p> </div>	правильно: HTML: <div class="block type1"> <p>С помощью связных классов можно сократить размер CSS-файла.</p> </div>   <div class="block type2"> <p>Чем меньше дублирующих блоков в CSS-файле - тем лучше</p> </div>
  CSS: div.type1 { margin:1em 0; font-size:1.2em; color:red; }   div.type2 { margin:1em 0; font-size:1.2em; color:blue; }	CSS: div.block { margin:1em 0; font-size:1.2em; }   div.type1 { color:red; }   div.type2 { color:blue; }

• Старайтесь давать осмысленные имена классам и не перегружать их названия излишними данными для облегчения понимания верстки сторонними лицами

  Пример:

  не правильно: HTML: <div id="header"> <ul class="head_menu"> <li>пункт 1</li> <li>пункт 2</li> <li>пункт 3</li> </ul> </div>	правильно: HTML: <div id="header"> <ul class="menu"> <li>пункт 1</li> <li>пункт 2</li> <li>пункт 3</li> </ul> </div>
  CSS: #header div.head_menu { /* some css here... */ }	CSS: #header div.head { ... }

• Не следует использовать графику там, где можно спокойно обойтись текстовыми символами.

• Не рекомендуется использовать параметр style в HTML тегах.

• При описании размера шрифта и межстрочного интервала лучше использовать относительные единицы измерения — em.

• Старайтесь в CSS-описании блоков сортировать свойства по следующим группам:

  • свойства текста и шрифта
  • оформление
  • размеры и отступы
  • позиционирование
  • поведение

• Настоятельно не рекомендуется стилизовать под единичное использование теги акцентного оформления текста (strong, em, small, span, sup, sub и т.д.) в тех местах где предполагается размещение динамического контента.

• Не стоит полностью отказываться от использования таблиц в пользу слоев: в некоторых случаях они более уместны.

• Стилизуйте элементы, по возможности, на более высоком уровне вложенности.

  Пример:

  <h2><a href="#">Стилизованный заголовок</a></h2>

  не правильно: h2 { /* пусто */ }   h2 a { font-size:2em; text-decoration:normal; }

  правильно: h2 { font-size:2em; text-decoration:normal; }   h2 a { /* пусто */ }

• Не оставляйте ссылки без содержимого. Также, рекомендуется использовать параметра title в ссылке, если в стиле содержимое самой ссылки скрывается. Для того, чтобы скрыть в стиле содержимое из ссылки используйте свойство text-indent.

  Пример:

  не правильно: <div class="logo"> <a href="#"></a> </div>

  правильно: <div class="logo"> <a href="#" title="на главную">Название сайта</a> </div>

• Используйте тег img только для контентных изображений. Таковыми считаются: изображения, которые сопровождают тексты, аннотации и т.д., банеры, счетчики.

• Предпочтительно подбирать нужные теги под логическую разметку страницы, а не создавать ее через css стили. Для лучшего понимания использования тегов, при верстке рекомендуется сначала сделать HTML-каркас без подключения CSS. Если посмотреть на такую страницу из веб-браузера, то будет наглядно видно, где возникают нелогичные ситуации, например «слипание» текста.

  Пример:

  не правильно: <div class="head">Заголовок</div>   <div class="menu"> <a href="#">пункт 1</a> <a href="#">пункт 2</a> ... </div>

  правильно: <h1>Заголовок</h1>   <ul class="menu"> <li><a href="#">пункт 1</a></li> <li><a href="#">пункт 2</a></li> ... </ul>

• Использовать элементы input, select и textarea в связке с label. Связка осуществляется посредством параметров for в label и id в вышеприведенных элементах.

  Пример:

  <label for="firstname">Имя:</label>
  <input type="text" name="firstname" id="firstname" />

• Если в дизайне планируется размещение наименований полей формы в самих полях, следует использовать тег label вместо прописывания значений в параметр value.

  Пример:

  не правильно: <input type="text" name="login" value="логин" /> <input type="password" name="pass" value="пароль" />

  правильно: <label for="login">логин:</label> <input type="text" id="login" name="login" /> <label for="pass">пароль:</label> <input type="password" id="pass" name="pass" />

• Для удобства навиции по полям формы рекомендуется использовать параметр tabindex в элементах форм.

• Не рекомендуется использовать инлайновые и блоковые элементы в одном уровне вложенности.

  Пример:

  не правильно: <div class="text"> <a href="#">навигация</a> <p>Инлайновые и блоковые элементы не стоит располагать рядом</p> </div>

  правильно: <div class="text"> <p><a href="#">навигация</a></p> <p>Инлайновые и блоковые элементы не стоит располагать рядом</p> </div>

• Для стилизации отступов у абзацев нужно использовать свойство margin.

• При стилизации блоков, содержащих динамический контент недопустимо задавать свойство height.

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

Берем Pen Tool , включаем Pahts  и начинаем обрисовывать контур нашей вазы до середины. 

В итоге, мы должны получить следующий результат (см. ниже):

Выбираем Direct Selection Tool (A) , выделяем полученный контур, и делаем его копию: Edit→Copy затем Edit→Paste (либо Ctrl+C затем Ctrl+V). С выбранным инструментом Direct Selection Tool, идем в Edit→Transform Path (Ctrl+T) и выбираем Flip Horizontal (зеркально отобразить относительно горизонтальной оси объекта). Полученный контур двигаем так, чтобы он максимально перекрывал вторую часть вазы.

Все же есть погрешности, правда? Этим сейчас и займемся. 

Выбираем все тот же Direct Selection Tool (A) , выделяем отдельные точки кривой и аккуратно передвигаем, пока он не закроет не перекрытые края нашего объекта. В результате, это должно иметь вид: 

Поправили? Хорошо. Поехали дальше. 

У нас теперь есть 2 контура, пересекающихся своими боковыми сторонами. Отлично. 

Берем Path Selection Tool , и выделяем точки обеих контуров и на панели настроек инструмента нажимаем кнопку Combine:

И «О Чудо!», они объединились. Как все, оказывается, просто. 

На этом, в принципе, разбор данной темы можно закончить. Все остальное попадает под категорию OFFTOP. 

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

С техникой разобрались, дальше уже творчество и креатив

Выбираем инструмент PenTool (P) , включаем Paths  и рисуем кривую (или несколько).

Выбираем инструмент Brush Tool (B) , переходим в окно редактирования кистей (Toggle the Brushes palette ), редактируем:

Выбираем размер кисти, её жесткость (в моем случае это 19 px Diameter и 90% Hardness). Переходим на вкладку Shape Dynamics и выставляем следующие значения:

Size Jitter = 0%
Pen Pressure выбираем в выпадающем меню
Minimum Diametr = 0%
Все остальные настройки оставляем «по умолчанию»

Теперь выбираем желаемый цвет для нашей линии (мы всегда сможем его поменять, способов уйма) Нажимаем Set foreground color:

Возвращаемся к инструменту Pen Tool (P) , в рабочей области нажимаем правую клавишу мыши и выбираем Stroke Path:

Выбираем из выпадающего меню Brush, ставим галочку напротив Simulate Pressure и нажимаем OK. Вуаля!

Используя этот урок можно добиться следующего эффекта:

Успехов!