Портфолио с хронологией событий

Timeline — это jQuery плагин, который специализируется на показе хронологических последовательностей событий.

Вы можете добавлять в шкалу времени любые виды медиа-контента, включая твиты, видео, карты, и связывать их с определёнными датами. С некоторыми дизайнерскими доработками, это станет идеальным решением для оформления портфолио, в котором вы сможете показать свои работы и интересы.

Пример Скачать

HTML

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

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

index.html

В разделе head у нас таблица стилей плагина – timeline.css, а также styles.css, содержащая наши настройки. В конце документа идёт библиотека jQuery, плагин timeline и script.js, который его инициализирует.

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

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

Timeline Portfolio with jQuery

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

jQuery

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

Метод init получает единственный параметр – источник данных. Это может быть либо файл json, как у нас, либо электронная таблица Google (о подобном использовании электронных таблиц говорится в статье Динамический раздел FAQ с помощью jQuery, YQL & Google Docs).

Для получения подробной информации об источниках данных, прочитайте документацию на сайте плагина (eng.), или просмотрите файл data.json в архиве с исходниками к этому уроку.

CSS

Мы использовали Firebug HTML Inspector, чтобы получить правильные селекторы элементов, которые мы собираемся настраивать. На вкладке HTML, можно легко увидеть, какие правила были применены к каждому элементу timeline.css. Чтобы их отменить, мы скопировали в styles.css те селекторы, для которых нам нужны изменения. Нескольким элементам, однако, мы добавили пометку !important, чтобы сделать свою работу приоритетнее.

Настройки, которые вы видите ниже, отменяют только несколько CSS стилей. Остальные останутся без изменений. Давайте начнём!

Первое, что мы сделаем в styles.css после назначения стилей самой страницы — это изменим фон шкалы:

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

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

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

Далее идёт числовая шкала под событиями:

Стрелки «назад» и «вперёд»:

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

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

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

Осталось только открыть timeline.psd, который входит в комплект плагина, и изменить цвет некоторых иконок в Photoshop. На этом создание нашего портфолио закончено! Все необходимые файлы мы включили в исходники к этому уроку.

Пример Скачать

Готово!

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


5 комментариев на “Портфолио с хронологией событий

  1. Автор, не знаете, как сделать, чтобы навигация внизу загружалась более развёрнутой (когда в одном годе много хроник, они слишком сжато и некрасиво внизу выглядят)? Заранее спасибо, если подскажете.

    Thumb up 0 Thumb down 0

    • На сайте timeline.verite.co есть TimelineJS Embed Generator.

      Это генератор, который поможет вам создать скрипт инициализации.

      В нем есть параметр Adjust the default calculated zoom level, попробуйте поиграть с отрицательными числами.

      Thumb up 0 Thumb down 0

  2. Embed generator позволяет настраивать только их iframe style, а как выставить параметр Adjust the default calculated zoom level для js в Вашем архиве? В какой файл и где прописать default zoom?

    Thumb up 0 Thumb down 0

Оставить комментарий