990 Timeline — это jQuery плагин, который специализируется на показе хронологических последовательностей событий.
Вы можете добавлять в шкалу времени любые виды медиа-контента, включая твиты, видео, карты, и связывать их с определёнными датами. С некоторыми дизайнерскими доработками, это станет идеальным решением для оформления портфолио, в котором вы сможете показать свои работы и интересы.
HTML
Timeline имеет стандартную тему в светлых тонах, она совершенно пригодна для использования, и в большинстве случаев является именно тем, что вам нужно. Однако, для нашего портфолио больше подходит тёмный дизайн, поэтому мы настроим тему по-своему.
Для начала давайте посмотрим на базовую разметку страницы:
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!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="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 сгенерирует дополнительную разметку --> </div> <!-- JavaScript включает jQuery, turn.js и наш собственный 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> |
В разделе head у нас таблица стилей плагина – timeline.css, а также styles.css, содержащая наши настройки. В конце документа идёт библиотека jQuery, плагин timeline и script.js, который его инициализирует.
Когда мы вызовем плагин, он будет искать на странице div с ID timeline. Внутрь него будет вставлена вся разметка, необходимая для отображения шкалы времени:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<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> & <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> |
Т.к. мы будем изменять CSS timeline, фрагмент кода выше даёт вам хорошее представление о необходимых настройках. Обратите внимание, что мы не будем заново создавать таблицу стилей плагина, мы только отменим некоторые правила в собственном css файле. Это лучше для будущих обновлений, не говоря уже о том, что это намного проще.
Было бы достаточно трудно писать CSS, смотря на одну только разметку, если учесть, что наши стили должны иметь приоритет над используемыми в timeline.css. К счастью, есть намного более простой путь, о котором мы будем говорить в разделе CSS этого урока.
jQuery
Для инициализации плагина нам нужно вызвать метод VMM.Timeline() на document ready:
|
1 2 3 4 5 6 |
$(function(){ var timeline = new VMM.Timeline(); timeline.init("data.json"); }); |
Метод init получает единственный параметр – источник данных. Это может быть либо файл json, как у нас, либо электронная таблица Google (о подобном использовании электронных таблиц говорится в статье Динамический раздел FAQ с помощью jQuery, YQL & Google Docs).
Для получения подробной информации об источниках данных, прочитайте документацию на сайте плагина (eng.), или просмотрите файл data.json в архиве с исходниками к этому уроку.
CSS
Мы использовали Firebug HTML Inspector, чтобы получить правильные селекторы элементов, которые мы собираемся настраивать. На вкладке HTML, можно легко увидеть, какие правила были применены к каждому элементу timeline.css. Чтобы их отменить, мы скопировали в styles.css те селекторы, для которых нам нужны изменения. Нескольким элементам, однако, мы добавили пометку !important, чтобы сделать свою работу приоритетнее.
Настройки, которые вы видите ниже, отменяют только несколько CSS стилей. Остальные останутся без изменений. Давайте начнём!
Первое, что мы сделаем в styles.css после назначения стилей самой страницы — это изменим фон шкалы:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#timeline{ background:none; } /* Отдельные события в слайдере */ .slider .slider-container-mask .slider-container{ background:none; } /* Установка пользовательского фонового изображения */ #timeline div.navigation{ background: url('../img/timeline_bg.jpg') repeat; border-top:none; } |
Для получения 3D эффекта, нам нужно будет использовать дополнительные элементы. Но плагин Timeline не включает их в разметку. Простое решение — использовать псевдо-элементы :before / :after. Элемент :after — это тёмная верхняя часть, для усиления эффекта в нём использован линейный градиент.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
#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%); } |
Затем мы добавляем тёмный фон навигации (секция с маленькими кликабельными подсказками, которые привязаны к событиям):
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#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; } |
Теперь мы задаём стиль кнопок увеличения/уменьшения и панели:
|
1 2 3 4 5 6 7 8 |
#timeline .toolbar{ border:none !important; background-color: #202222 !important; } #timeline .toolbar div{ border:none !important; } |
Далее идёт числовая шкала под событиями:
|
1 2 3 4 5 6 7 |
#timeline .navigation .timenav .time .time-interval-minor .minor{ margin-left:-1px; } #timeline .navigation .timenav .time .time-interval div{ color: #CCCCCC; } |
Стрелки «назад» и «вперёд»:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.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; } |
Экран загрузки:
|
1 2 3 4 5 6 7 8 9 10 11 |
#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; } |
Затем мы переходим к слайдам:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
#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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
/* Настройка первого слайда - обложки */ #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. На этом создание нашего портфолио закончено! Все необходимые файлы мы включили в исходники к этому уроку.
Готово!
В этом портфолио вы можете показать не только свои последние работы, но также интересные и важные моменты своей карьеры. Поделитесь своими мыслями и мнениями в комментариях.
Отлично смотрится. Было бы здорово еще прикрутить эффект параллакс.
Автор, не знаете, как сделать, чтобы навигация внизу загружалась более развёрнутой (когда в одном годе много хроник, они слишком сжато и некрасиво внизу выглядят)? Заранее спасибо, если подскажете.
На сайте есть TimelineJS Embed Generator.
Это генератор, который поможет вам создать скрипт инициализации.
В нем есть параметр Adjust the default calculated zoom level, попробуйте поиграть с отрицательными числами.
Embed generator позволяет настраивать только их iframe style, а как выставить параметр Adjust the default calculated zoom level для js в Вашем архиве? В какой файл и где прописать default zoom?
Добрый день!!
Как включить русский язык, и доп параметры?
Спасибо.