Давайте начнем с разметки.
Разметка
У нас будет основной контейнер "cn_wrapper", содержащий правый элемент с классом "cn_preview" и левый – с классом "cn_list". Div анонса будет заключать элементы контента. Каждый из них содержит изображение анонса, название и описание наряду с несколькими фрагментами и ссылкой на саму статью.
В списке слева у нас будут соответствующие пункты кратких описаний. В конце этого контейнера мы также добавим навигацию для пошагового движения по страницам:
<div class="cn_wrapper">
<div id="cn_preview" class="cn_preview">
<div class="cn_content" style="top:5px;">
<img src="images/polaroidphotobar.jpg" alt=""/>
<h1>Polaroid Photobar Gallery with jQuery</h1>
<span class="cn_date">28/09/2010</span>
<span class="cn_category">Tutorials</span>
<p>In this tutorial we are going to create an...</p>
<a href="http://tympanus.net/codrops/2010/09/28/polaroid-photobar-gallery/" target="_blank" class="cn_more">Read more</a>
</div>
<div class="cn_content">
<img src="images/fullpageimagegallery.jpg" alt=""/>
<h1>Full Page Image Gallery with jQuery</h1>
<span class="cn_date">08/09/2010</span>
<span class="cn_category">Tutorials</span>
<p>In this tutorial we are going to create a stunning...
</p>
<a href="http://tympanus.net/codrops/2010/09/08/full-page-image-gallery/" target="_blank" class="cn_more">Read more</a>
</div>
...
</div>
<div id="cn_list" class="cn_list">
<div class="cn_page" style="display:block;">
<div class="cn_item selected">
<h2>Polaroid Photobar Gallery with jQuery</h2>
<p>Tutorial on how to create a gallery in polaroid style</p>
</div>
<div class="cn_item">
<h2>Full Page Image Gallery with jQuery</h2>
<p>Another tutorial on how to make a full gallery</p>
</div>
...
</div>
<div class="cn_page">
...
</div>
<div class="cn_page">
...
</div>
<div class="cn_nav">
<a id="cn_prev" class="cn_prev disabled"></a>
<a id="cn_next" class="cn_next"></a>
</div>
</div>
</div>
Первый элемент содержимого контейнера анонса уже будет иметь стиль к моменту прокрутки, а именно отступ сверху 5 px. Все остальные анонсы скрыты "hidden", потому что у них будет отступ сверху на 310 px.
Список элементов будет разделен на страницы, каждая из которых содержит самое большее 5 пунктов.
Давайте посмотрим на стиль.
CSS
Для создания нескольких изящных эффектов мы используем множество свойств CSS3. Мы применим тени, закругленные края и градиенты как с RGB, так и с шестнадцатеричными значениями.
Давайте начнем с основного контейнера. Мы установим его относительно, чтобы затем можно было внутри него использовать абсолютное позиционирование:
.cn_wrapper{
margin:90px auto 0px auto;
width:500px;
height:300px;
position:relative;
color:#fff;
overflow:hidden;
padding:5px;
text-shadow:1px 1px 1px #000;
border:1px solid #111;
background-color:#333;
-moz-box-shadow:1px 1px 4px #222;
-webkit-box-shadow:1px 1px 4px #222;
box-shadow:1px 1px 4px #222;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
Заголовки внутри нашей программы просмотра получат следующий стиль:
.cn_wrapper h1{
font-size:20px;
text-transform:uppercase;
}
.cn_wrapper h2{
font-size:12px;
border-bottom:1px solid #000;
padding-bottom:4px;
text-transform:uppercase;
}
В списке программы просмотра используется h2, и мы передаем ему нижнюю границу для создания под ним красивой «выгравированной» линии. Это сработает, потому что мы передадим p, следующему за ним, верхнюю границу более светлого цвета.
И анонс, и список будут позиционированы абсолютно, так что мы сначала определим общий стиль, а затем будем перезаписывать атрибут left для каждого анонса:
.cn_preview, .cn_list{
width:250px;
height:300px;
position:absolute;
top:2px;
left:6px;
}
.cn_preview{
left:255px;
}
Внутри анонса у нас будет несколько элементов содержимого, у которых будут следующие стили:
.cn_content{
border:1px solid #444;
top:310px;/*5*/
left:5px;
width:219px;
padding:10px;
position:absolute;
background-color:#101010;
height:275px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
Эти элементы будут анимированы с помощью JavaScript. Вначале нам нужно их скрыть, так что определяем отступ сверху (top) больше обертывающего (основного) div-a. Вот почему мы устанавливаем overflow обертывающего (основного) div-a как скрытое (hidden) так, чтобы не видеть ничего, выходящего за его границы.
Теперь назначим стили элементам внутри div’а content.
Изображение в нашем случае всегда будет максимальной ширины 215 px. Обратите вниманием, что если у вас изображение другого размера, вам придется под него подогнать все элементы. В этом случае высота изображения будет 119 px. Это значение, на котором мы будем базировать высоту следующих элементов.
.cn_content img{
width:215px;
-moz-box-shadow:1px 1px 4px #000;
-webkit-box-shadow:1px 1px 4px #000;
box-shadow:1px 1px 4px #000;
}
Дата и категория будут позиционированы абсолютно внизу div’а content:
.cn_date{
position:absolute;
bottom:30px;
right:8px;
font-size:11px;
}
.cn_category{
position:absolute;
bottom:30px;
left:8px;
font-size:11px;
padding:1px 3px;
background:#ccc;
border:1px solid #ddd;
color:#000;
text-shadow:-1px 0px 1px #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
Описание, являющееся элементом p, будет иметь фиксированную высоту, а если оно длиннее, то будет обрезано:
.cn_content p{
height:57px;
margin-top:2px;
overflow:hidden;
}
Кнопка more (далее), которая будет ссылкой на исходную статью, будет снабжена градиентом, тенью и закругленными границами внизу слева и справа, чтобы подходить к содержимому:
a.cn_more{
position:absolute;
padding: 4px 0px;
left:0px;
bottom:0px;
width:236px;
color:#fff;
text-align:center;
font-size:12px;
letter-spacing:1px;
text-shadow:1px 1px 1px #011c44;
text-transform:uppercase;
text-decoration: none;
border:1px solid #4c7ecb;
outline:none;
cursor:pointer;
background-color: #1951A5;
background-image:
-moz-linear-gradient(
top,
rgba(255,255,255,0.25),
rgba(255,255,255,0.05)
);
background-image:
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgba(255,255,255,0.25)),
color-stop(1, rgba(255,255,255,0.05))
);
-moz-border-radius: 0px 0px 5px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-border-bottom-left-radius: 5px;
-border-bottom-right-radius: 5px;
-moz-box-shadow:1px 1px 3px #111;
-webkit-box-shadow:1px 1px 3px #111;
box-shadow:1px 1px 3px #111;
}
Смена цвета шрифта при проведении мышью создаст красивый объемный эффект:
a.cn_more:hover{
color: #011c44;
text-shadow: 1px 1px 1px #ccdffc;
}
Теперь мы определим стили пунктам списка. У них в качестве фона будет градиент, меняющийся при проведении над ним мышью (hover). К выбранному пункту мы также применим эффект hover.
.cn_item{
border:1px solid #090909;
cursor:pointer;
position:relative;
overflow:hidden;
height:49px;
color:#fff;
padding:5px;
margin:6px 5px 0px 0px;
text-shadow:1px 1px 1px #000;
background:#2b2b2b;
background:
-webkit-gradient(
linear,
left top,
left bottom,
from(#171717),
to(#2b2b2b)
);
background:
-moz-linear-gradient(
top,
#171717,
#2b2b2b
);
-moz-box-shadow:1px 1px 3px #111;
-webkit-box-shadow:1px 1px 3px #111;
box-shadow:1px 1px 3px #111;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.cn_item:hover, .selected{
border-color:#4c7ecb;
background-color: #1951A5;
background-image:
-moz-linear-gradient(
top,
rgba(255,255,255,0.25),
rgba(255,255,255,0.05)
);
background-image:
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgba(255,255,255,0.25)),
color-stop(1, rgba(255,255,255,0.05))
);
}
«Гравированная» линия под заголовком, кроме того, будет менять цвет:
.cn_item:hover h2,
.cn_list .selected h2,
.cn_item:active h2{
border-color:#2C5FAC;
}
.cn_item:hover p,
.cn_list .selected p,
.cn_item:active p{
border-color:#527CBB;
}
Псевдокласс active, например, при щелчке на пункт списка получит эффект выгравированного текста при помощи следующего стиля:
.cn_item:active {
color: #011c44;
text-shadow: 1px 1px 1px #ccdffc;
}
Короткое описание в пункте списка будет иметь фиксированную высоту и верхнюю границу, которые в сочетании с нижней границей h2 создадут линию, которая смотрится как гравированная:
.cn_list p{
height:29px;
padding-top:2px;
overflow:hidden;
border-top:1px solid #333;
}
Теперь давайте присвоим стили навигации. Мы установим ее абсолютно внизу своего контейнера списка:
.cn_nav{
width:55px;
height:24px;
position:absolute;
bottom:0px;
left:94px;
}
У следующего и предыдущего элементов будет следующий общий стиль:
a.cn_next, a.cn_prev{
float:left;
height:23px;
width:23px;
background-color:#212121;
background-repeat:no-repeat;
background-position:center center;
cursor:pointer;
outline:none;
border:1px solid #111;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
Теперь мы только установим индивидуальные стили, которые являются фоновыми изображениями:
a.cn_next{
background-image:url(../images/next.png);
}
a.cn_prev{
margin-right:5px;
background-image:url(../images/prev.png);
}
При проведении мышью мы просто меняем цвет фона:
.cn_nav a:hover{
background-color:#101010;
}
При щелчке по пункту навигации мы сдвигаем его вниз на 1 px, таким образом он смотрится нажатым. Это можно сделать, установив верхнее поле на 1px:
.cn_nav a:active{
margin-top:1px;
background-color:#000;
}
У неактивного элемента навигации непрозрачность будет 0.5:
.cn_nav a.disabled{
opacity:0.5;
}
Последнее, что нам нужно определить – чтобы страницы списка не были видны. Потом мы сделаем их видимыми в JavaScript:
.cn_page{
display:none;
}
Вот и весь стиль. Теперь давайте с помощью jQuery добавим эффекты!
JavaScript
Для создания эффектов мы используем easing, так что не забудьте включить jQuery плагин easing.
В jQuery мы начнем с определения нескольких переменных:
//caching
//кнопки «вперед» и «назад»
var $cn_next = $('#cn_next');
var $cn_prev = $('#cn_prev');
//обертка для левых пунктов
var $cn_list = $('#cn_list');
var $pages = $cn_list.find('.cn_page');
//количество страниц
var cnt_pages = $pages.length;
//по умолчанию номер страницы = 1
var page = 1;
//список новостей (левые пункты)
var $items = $cn_list.find('.cn_item');
//текущий пункт просматриваем справа
var $cn_preview = $('#cn_preview');
//номер пункта в просмотре.
//по умочанию первый пункт
var current = 1;
Для каждого элемента сохраняем его индекс относительно всего документа. Привязываем событие щелчка (click), которое заставляет текущий или нажатый элемент скользить вверх или вниз. В зависимости от текущего элемента (следует ли он до или после последнего нажатого), нажатый будет сдвигаться вверх или вниз:
$items.each(function(i){
var $item = $(this);
$item.data('idx',i+1);
$item.bind('click',function(){
var $this = $(this);
$cn_list.find('.selected').removeClass('selected');
$this.addClass('selected');
var idx = $(this).data('idx');
var $current = $cn_preview.find('.cn_content:nth-child('+current+')');
var $next = $cn_preview.find('.cn_content:nth-child('+idx+')');
if(idx > current){
$current.stop()
.animate({
'top':'-300px'
},600,'easeOutBack',function(){
$(this).css({'top':'310px'});
});
$next.css({
'top':'310px'
}).stop()
.animate({
'top':'5px'
},600,'easeOutBack');
}
else if(idx < current){
$current.stop()
.animate({
'top':'310px'
},600,'easeOutBack',function(){
$(this).css({'top':'310px'});
});
$next.css({
'top':'-300px'
}).stop()
.animate({
'top':'5px'
},600,'easeOutBack');
}
current = idx;
});
});
Теперь определим, что происходит, когда в навигации щелкают на next (следующая). Следующая страница должна постепенно проявиться, если она существует, или же нужно деактивировать кнопку, если следующей страницы не существует:
$cn_next.bind('click',function(e){
var $this = $(this);
$cn_prev.removeClass('disabled');
++page;
if(page == cnt_pages)
$this.addClass('disabled');
if(page > cnt_pages){
page = cnt_pages;
return;
}
$pages.hide();
$cn_list.find('.cn_page:nth-child('+page+')').fadeIn();
e.preventDefault();
});
И то же самое для предыдущей страницы:
$cn_prev.bind('click',function(e){
var $this = $(this);
$cn_next.removeClass('disabled');
--page;
if(page == 1)
$this.addClass('disabled');
if(page < 1){
page = 1;
return;
}
$pages.hide();
$cn_list.find('.cn_page:nth-child('+page+')').fadeIn();
e.preventDefault();
});
Чтобы все выглядело еще лучше, мы добавляем в заголовок HTML следующие строки, используя модуль cufon-yui.js:
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Bebas_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon('.cn_wrapper h1,h2', {
textShadow: '-1px 1px black'
});
</script>
Вот и все! Надеемся, что вам этот учебник понравился и оказался полезным!!