Портфолио-временная шкала

Дата публикации: 2013-12-23

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

HTML

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

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Timeline Portfolio | Tutorialzine Demo</title>

<!—Таблица стилей timelineпо умолчанию -->
<link rel="stylesheet"href="assets/css/timeline.css" />
<!—Наша модификация темы -->
<link rel="stylesheet"href="assets/css/styles.css" />

<!-- Google Fonts -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Dancing+Script|Antic+Slab" />

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<div id="timeline">
<!—ЗдесьTimeline сгенерирует дополнительную разметку -->
</div>

<!-- JavaScript включаетjQuery, turn.js инашсобственный script.js -->
<scriptsrc="//code.jquery.com/jquery-1.7.1.min.js"></script>
<scriptsrc="assets/js/timeline-min.js"></script>
<scriptsrc="assets/js/script.js"></script>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Timeline Portfolio | Tutorialzine Demo</title>

<!—Таблица стилей timelineпо умолчанию -->

<!—Наша модификация темы -->

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<!—ЗдесьTimeline сгенерирует дополнительную разметку -->

</div>

<scriptsrc="//code.jquery.com/jquery-1.7.1.min.js"></script>

<scriptsrc="assets/js/timeline-min.js"></script>

<scriptsrc="assets/js/script.js"></script>

</body>

</html>

В первом разделе у нас имеется таблица стилей плагина – timeline.cssиstyles.css, где будут содержаться наши модификации. В нижнем колонтитуле находится библиотека jQuerylibrary, плагин временной шкалы timeline и инициализирующий ее script.js. При вызове плагина тот отыщет на вашей странице div с ID timeline. Внутрь него он вставит всю нужную ему для представления временной шкалы разметку:

<div class="container main" id="timeline">
<div class="feature slider" style="overflow-y: hidden;">
<div class="slider-container-mask slider-container slider-item-container">

<!—Нижеприведенные div’ы – это события временной шкалы -->

<div class="slider-item content">
<div class="text container">

<h2 class="start">Johnny B Goode</h2>
<p><em><span class="c1">Designer</span>&amp; <span class=
                    "c2">Developer</span></em></p>

</div>

<div class="media media-wrapper media-container">
<!—Изображения и прочие средства будут здесь -->
</div>
</div>

<div class="slider-item content content-container">
<div class="text container">

<h2 class="date">March 2009</h2>
<h3>My first experiment in time-lapse photography</h3>
<p>Nature at its finest in this video.</p>

</div>

<div class="media media-wrapper media-container">
<!--Изображения и прочие средства будут здесь-->
</div>
</div>

<!—Здесь будут еще элементы -->
</div>

<!— Указатель следующего события -->
<div class="nav-next nav-container">
<div class="icon"></div>
<div class="date">March 2010</div>
<div class="title">Logo Design for a pet shop</div>
</div>

<!—Указатель предыдущего события -->
<div class="nav-previous nav-container">
<div class="icon"></div>
<div class="date">July 2009</div>
<div class="title">Another time-lapse experiment</div>
</div>
</div>

<div class="navigation">

<!—Здесьбудутэлементынавигации (подсказки-тултипы внизу)
-  по одному для каждого события -->

<div class="time">
<!—Датывременнойшкалыбудутздесь -->
</div>
</div>

<div class="timenav-background">
<div class="timenav-line" style="left: 633px;"></div>

<div class="timenav-interval-background top-highlight"></div>
</div>

<div class="toolbar" style="top: 27px;">
<div class="back-home icon" title="Return to Title"></div>
<div class="zoom-in icon" title="Expand Timeline"></div>
<div class="zoom-out icon" data-original-title="Contract Timeline"></div>
</div>
</div>
</div>

<!—Нижеприведенные div’ы – это события временной шкалы -->

<h2 class="start">Johnny B Goode</h2>

<p><em><span class="c1">Designer</span>& <span class=

"c2">Developer</span></em></p>

</div>

<!—Изображения и прочие средства будут здесь -->

</div>

<h2 class="date">March 2009</h2>

<h3>My first experiment in time-lapse photography</h3>

<p>Nature at its finest in this video.</p>

</div>

</div>

<!—Здесь будут еще элементы -->

</div>

<!— Указатель следующего события -->

<div class="date">March 2010</div>

<div class="title">Logo Design for a pet shop</div>

</div>

<!—Указатель предыдущего события -->

<div class="title">Another time-lapse experiment</div>

</div>

<!—Здесьбудутэлементынавигации (подсказки-тултипы внизу)

- по одному для каждого события -->

<!—Датывременнойшкалыбудутздесь -->

</div>

</div>

</div>

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

Писать CSS, глядя только на разметку – задача сложная, при условии, что у наших правил должно быть предшествование перед теми, что употребляются в timeline.css. К счастью, есть более легкий путь, о чем вы узнаете из раздела CSS этого учебника.

jQuery

Для инициализации плагина нам нужно вызвать метод VMM.Timeline() в documentready:

$(function(){

var timeline = newVMM.Timeline();
timeline.init("data.json");

});

$(function(){

var timeline = newVMM.Timeline();

timeline.init("data.json");

});

Метод init принимает один аргумент – источник данных. Это может быть либо файл json, как выше, либо электронная таблица Google (напоминание о нашем FAQ-учебнике о таблицах).

Получить дополнительную информацию о поддерживаемых источниках данных можно в документации на сайте плагина или просмотрев файлdata.json в скачиваемом zip-файле этого учебника.

CSS

Для получения нужных селекторов тех элементов, которые мы собираемся переделывать, я пользовался HTML-инспектором Firebug’а. В закладке HTML видно, какие правила применил timeline.css к каждому из элементов. Для их отмены я скопировал те же самые селекторы в styles.css, где будет происходить наша модификация. Для облегчения работы в некоторых случаях я, тем не менее, использовал флаг !important.

Все нижеприведенные модификации отменяют всего несколько стилей CSS. Остальные унаследованы таблицей стилей по умолчанию. Давайте начнем! Первое, что мы сделаем в styles.css после назначения стилей самой странице – изменим фоны временной шкалы:

#timeline{
background:none;
}

/* Отдельныесобытия в слайдере */
.slider.slider-container-mask.slider-container{
background:none;
}

/* Устанавливаем пользовательское фоновое изображение */
#timelinediv.navigation{
background:url('../img/timeline_bg.jpg') repeat;
border-top:none;
}

#timeline{

background:none;

}

/* Отдельныесобытия в слайдере */

.slider.slider-container-mask.slider-container{

background:none;

}

/* Устанавливаем пользовательское фоновое изображение */

#timelinediv.navigation{

background:url('../img/timeline_bg.jpg') repeat;

border-top:none;

}

Для создания 3D-эффекта навигации временной шкалы нам придется применить дополнительные элементы. Но в свою разметку плагин Timeline таковые не включает. Простое решение – использовать псевдоэлементы:before / :after. Элемент :after– это более темная верхняя часть и для усиления эффекта он пользуется линейным градиентом.

#timelinediv.navigation:before{
position:absolute;
content:'';
height:40px;
width:100%;
left:0;
top:-40px;
background:url('../img/timeline_bg.jpg') repeat;
}

#timelinediv.navigation:after{
position:absolute;
content:'';
height:10px;
width:100%;
left:0;
top:-40px;
background:repeat-x;

background-image: linear-gradient(bottom, #4344460%, #363839100%);
background-image: -o-linear-gradient(bottom, #4344460%, #363839100%);
background-image: -moz-linear-gradient(bottom, #4344460%, #363839100%);
background-image: -webkit-linear-gradient(bottom, #4344460%, #363839100%);
background-image: -ms-linear-gradient(bottom, #4344460%, #363839100%);
}

#timelinediv.navigation:before{

position:absolute;

content:'';

height:40px;

width:100%;

left:0;

top:-40px;

background:url('../img/timeline_bg.jpg') repeat;

}

#timelinediv.navigation:after{

position:absolute;

content:'';

height:10px;

width:100%;

left:0;

top:-40px;

background:repeat-x;

}

Затем мы добавляем темный фон к навигации временной шкалы (сектор с представляющими события маленькими подсказками-тултипами, на которые можно щелкать):

#timelinediv.timenav-background{
	background-color:rgba(0,0,0,0.4) !important;

}

#timeline.navigation.timenav-background.timenav-interval-background{
background:none;
}

#timeline.top-highlight{
background-color:transparent !important;
}

#timelinediv.timenav-background{

background-color:rgba(0,0,0,0.4) !important;

}

#timeline.navigation.timenav-background.timenav-interval-background{

background:none;

}

#timeline.top-highlight{

background-color:transparent !important;

}

Позже мы назначаем стили кнопкам увеличения/уменьшения и панели инструментов:

#timeline.toolbar{
border:none !important;
background-color:#202222 !important;
}

#timeline.toolbardiv{
border:none !important;
}

#timeline.toolbar{

border:none !important;

background-color:#202222 !important;

}

#timeline.toolbardiv{

border:none !important;

}

Далее следует числовая шкала внизу:

#timeline.navigation.timenav.time.time-interval-minor.minor{
margin-left:-1px;
}

#timeline.navigation.timenav.time.time-intervaldiv{
color:#CCCCCC;
}

#timeline.navigation.timenav.time.time-interval-minor.minor{

margin-left:-1px;

}

#timeline.navigation.timenav.time.time-intervaldiv{

color:#CCCCCC;

}

Указатели предыдущего и следующего события:

.slider.nav-previous.icon {
background:url("timeline.png") no-repeat scroll 0 -293px transparent;
}

.slider.nav-previous,.slider.nav-next{
font-family:'SegoeUI',sans-serif;
}

.slider.nav-next.icon {
background:url("timeline.png") no-repeat scroll 72px -221px transparent;
width:70px !important;
}

.slider.nav-next:hover.icon{
position:relative;
right:-5px;
}

.slider.nav-previous:hover, .slider.nav-next:hover {
color:#666;
cursor: pointer;
}

#timeline.thumbnail {
border: medium none;
}

.slider.nav-previous.icon {

background:url("timeline.png") no-repeat scroll 0 -293px transparent;

}

.slider.nav-previous,.slider.nav-next{

font-family:'SegoeUI',sans-serif;

}

.slider.nav-next.icon {

background:url("timeline.png") no-repeat scroll 72px -221px transparent;

width:70px !important;

}

.slider.nav-next:hover.icon{

position:relative;

right:-5px;

}

.slider.nav-previous:hover, .slider.nav-next:hover {

color:#666;

cursor: pointer;

}

#timeline.thumbnail {

border: medium none;

}

Экран загрузки:

#timeline.feedback {
background-color:#222222;
box-shadow:0030px rgba(0, 0, 0, 0.2) inset;
border:none;
}

#timeline.feedbackdiv{
color:#AAAAAA;
font-size:14px !important;
font-weight: normal;
}

#timeline.feedback {

background-color:#222222;

box-shadow:0030px rgba(0, 0, 0, 0.2) inset;

border:none;

}

#timeline.feedbackdiv{

color:#AAAAAA;

font-size:14px !important;

font-weight: normal;

}

Затем переходим к слайдам:

#timeline.slider-itemh2,
#timeline.slider-itemh3{
font-family:'AnticSlab','SegoeUI',sans-serif;
}

#timeline.slider-itemh2{
color:#fff;
}

#timeline.slider-itemp{
font-family:'SegoeUI',sans-serif;
}

#timeline.slider-itemimg,
#timeline.slider-itemiframe{
border:none;
}

#timeline.slider-itemh2,

#timeline.slider-itemh3{

font-family:'AnticSlab','SegoeUI',sans-serif;

}

#timeline.slider-itemh2{

color:#fff;

}

#timeline.slider-itemp{

font-family:'SegoeUI',sans-serif;

}

#timeline.slider-itemimg,

#timeline.slider-itemiframe{

border:none;

}

Наконец мы модифицируем появление первой страницы. Я пользуюсь nth-child(1) для выбора только первого элемента слайдера, содержащего название и описание временной шкалы, определенного в источнике данных JSON.

/* Модификация первого слайда - обложка */

#timeline.slider-item:nth-child(1)h2{
font:normal70px/1 'Antic Slab','SegoeUI',sans-serif;
background:rgba(0,0,0,0.3);
white-space:nowrap;
padding:10px 5px 5px20px;
position:relative;
right:-60px;
z-index:10;
}

#timeline.slider-item:nth-child(1)pi{
font:normal normal 40px 'Dancing Script','SegoeUI',sans-serif;
background:rgba(0,0,0,0.3);
white-space:nowrap;
padding:5px 20px;
position:relative;
right:-60px;
z-index:10;
}

#timeline.slider-item:nth-child(1)p.c1{
color:#1bdff0;
}

#timeline.slider-item:nth-child(1)p.c2{
color:#c92fe6;
}

#timeline.slider-item:nth-child(1).media-container {
left: -30px;
position: relative;
z-index:1;
}

#timeline.slider-item:nth-child(1).credit{
text-align: center;
}

/* Модификация первого слайда - обложка */

#timeline.slider-item:nth-child(1)h2{

font:normal70px/1 'Antic Slab','SegoeUI',sans-serif;

background:rgba(0,0,0,0.3);

white-space:nowrap;

padding:10px 5px 5px20px;

position:relative;

right:-60px;

z-index:10;

}

#timeline.slider-item:nth-child(1)pi{

font:normal normal 40px 'Dancing Script','SegoeUI',sans-serif;

background:rgba(0,0,0,0.3);

white-space:nowrap;

padding:5px 20px;

position:relative;

right:-60px;

z-index:10;

}

#timeline.slider-item:nth-child(1)p.c1{

color:#1bdff0;

}

#timeline.slider-item:nth-child(1)p.c2{

color:#c92fe6;

}

#timeline.slider-item:nth-child(1).media-container {

left: -30px;

position: relative;

z-index:1;

}

#timeline.slider-item:nth-child(1).credit{

text-align: center;

}

Все, что осталось сделать – это открыть timeline.psd, который скачался в комплекте с плагином, и изменить цвет некоторых иконок в photoshop’е. Я включил необходимые файлы в скачиваемый zip-файл этого учебника. После этого наше портфолио-временная шкала закончено!

Готово!

Это портфолио можно использовать не только для показа последних проектов, но и ваших интересов и важных моментов карьеры. Поделитесь своими мыслями и предложениями в разделе комментариев.

Автор: Martin Angelov

Источник: //tutorialzine.com/

Редакция: Команда webformyself.

Метки: веб-дизайн сайта