—»     —»   Портфолио в виде хроники
  Раздел: Руководства   Комментариев: 2  

Портфолио в виде хроники



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

Портфолио в виде хроники

HTML-код

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

Для начала давайте рассмотрим основную структуру страницы:

index.html

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

<!-- The default timeline stylesheet -->
<link rel="stylesheet" href="assets/css/timeline.css" />
<!-- Our customizations to the theme -->
<link rel="stylesheet" href="assets/css/styles.css" />

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

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

<body>

<div id="timeline">
<!-- Timeline will generate additional markup here -->
</div>

<!-- javascript includes - jQuery, turn.js and our own script.js -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="assets/js/timeline-min.js"></script>
<script src="assets/js/script.js"></script>

</body>
</html>

В головной секции у нас будут указаны файлы оформления плагина – timeline.css и styles.css, в них будет размещена вся информация о стилях. В подвале у нас будет размещена jQuery-библиотека, плагин и файл script.js, посредством которого плагин будет запускаться.

Когда мы вызываем плагин, он осуществляет поиск div’а на вашей странице, которому задан ID плагина. Внутри этого div’а плагин размещает разметку для отображения хроники:

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

<!-- The divs below are the events of the timeline -->

<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">
<!-- Images or other media go here -->
</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">
<!-- Images or other media go here -->
</div>
</div>

<!-- More items go here -->
</div>

<!-- Next arrow -->
<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>

<!-- Previous arrow -->
<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">

<!-- The navigation items go here (the tooltips in the bottom)
one for each of the events -->

<div class="time">
<!-- The timeline numbers go here -->
</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>

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

Портфолио в виде хроники

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

jQuery

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

$(function(){

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

});

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

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

CSS-код

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

Все оформления, которые вы видите ниже, переписывают лишь некоторые CSS-стили. Остальные стили наследуются из исходной таблицы стилей. Давайте приступим!

Первое, что нам нужно сделать в styles.css, после стилизации самой страницы, это изменить фоны хроники:

#timeline{
background:none;
}

/* The individual events in the slider */
.slider .slider-container-mask .slider-container{
background:none;
}

/* Setting a custom background image */
#timeline div.navigation{
background: url('../img/timeline_bg.jpg') repeat;
border-top:none;
}

Портфолио в виде хроники

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

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

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

background-image: linear-gradient(bottom, #434446 0%, #363839 100%);
background-image: -o-linear-gradient(bottom, #434446 0%, #363839 100%);
background-image: -moz-linear-gradient(bottom, #434446 0%, #363839 100%);
background-image: -webkit-linear-gradient(bottom, #434446 0%, #363839 100%);
background-image: -ms-linear-gradient(bottom, #434446 0%, #363839 100%);
}

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

#timeline div.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 .toolbar div{
border:none !important;
}

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

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

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

Далее стилизуем стрелки:

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

.slider .nav-previous,.slider .nav-next{
font-family:'Segoe UI',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: 0 0 30px rgba(0, 0, 0, 0.2) inset;
border:none;
}

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

Далее мы переходим к слайдам:

#timeline .slider-item h2,
#timeline .slider-item h3{
font-family:'Antic Slab','Segoe UI',sans-serif;
}

#timeline .slider-item h2{
color:#fff;
}

#timeline .slider-item p{
font-family:'Segoe UI',sans-serif;
}

#timeline .slider-item img,
#timeline .slider-item iframe{
border:none;
}

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

/* Customizing the first slide - the cover */

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

#timeline .slider-item:nth-child(1) p i{
font:normal normal 40px 'Dancing Script','Segoe UI',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. Мы включили необходимые файлы в архив, предложенный в нашем руководсте. На этом наш портфолио завершено!

Готово!

Вы можете использовать данный проект для отображения не только ваших последних работ, но и так же для представления интересных моментов вашей карьеры. Пожалуйста, выскажите свое мнение или свои мысли в комментариях!

Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Design FactoRy   Прочитано (раз): 7492   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 11 мая 2012 @ 08:45
Написал: sokos — группа: Читатели  
На сайте с: 16.05.2010   |   Публикаций: 0   |   Комментариев: 22
ICQ: --- не указано ---
плохо, что нельзя ссылку дать на конкретный проект...
Комментарий #2: 14 апреля 2013 @ 15:46
Написал: Александр — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Не работает что-то все это, в файле data.json Дримвивер выдает ошибку, а с гугл-доксом вообще не запускается...
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Август 2019    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
262728293031