Від автора: 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 після призначення стилів самій сторінці – змінимо фони тимчасової шкали:
Для створення 3D-ефекту навігації тимчасової шкали нам доведеться застосувати додаткові елементи. Але в свою розмітку плагін Timeline такі не включає. Просте рішення – використовувати псевдоелементи:before / :after. Елемент :after– це більш темна верхня частина і для посилення ефекту він користується лінійним градієнтом.
Нарешті ми модифікуємо поява першої сторінки. Я користуюся nth-child(1) для вибору першого елемента слайдера, що містить назву та опис шкали часу, визначеного у джерелі даних JSON.
Все, що залишилося зробити – це відкрити timeline.psd, який скачати в комплекті з плагіном, і змінити колір деяких іконок в photoshop є. Я включив необхідні файли у скачуваний файл .zip цього підручника. Після цього наше портфоліо-тимчасова шкала закінчено!
Готово!
Це портфоліо можна використовувати не тільки для показу останніх проектів, але і ваших інтересів і важливих моментів кар’єри. Поділіться своїми думками і пропозиціями в розділі коментарів.
Від автора: для front-end розробників настав час відмовитися від використання властивості float в CSS і зануритися в новий захоплюючий світ flexbox. Підтримка Flexbox в CSS вже досить хороша, властивість flexbox підтримують всі сучасні браузери.