Портфоліо-часова шкала

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

HTML

Timeline за замовчуванням комплектується темою в світлих тонах. Ідеально практична, в більшості випадків вона – те, що потрібно. Проте нашому портфоліо найкраще підійде дизайн в темних тонах, тому ми переробимо його на свій смак. По-перше, давайте розглянемо базову розмітку сторінки:

index.html

Timeline Portfolio | Tutorialzine Demo

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

Johnny B Goode

Designer& Developer

March 2009

My first experiment in time-lapse photography

Nature at its finest in this video.

March 2010

Logo Design for a pet shop

July 2009

Another time-lapse experiment

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

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

jQuery

Для ініціалізації плагіна нам потрібно викликати метод VMM.Timeline() в documentready:

$(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;
}

Для створення 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.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.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;
}

Екран завантаження:

#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;
}

Нарешті ми модифікуємо поява першої сторінки. Я користуюся 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.psd, який скачати в комплекті з плагіном, і змінити колір деяких іконок в photoshop є. Я включив необхідні файли у скачуваний файл .zip цього підручника. Після цього наше портфоліо-тимчасова шкала закінчено!

Готово!

Це портфоліо можна використовувати не тільки для показу останніх проектів, але і ваших інтересів і важливих моментів кар’єри. Поділіться своїми думками і пропозиціями в розділі коментарів.