36 примеров таймлайнов, шаблоны и советы по дизайну

Жанры

  • Альтернативная история, попаданцы (937)
  • Без рубрики (20)
  • Биографии и мемуары (90)
  • Боевая фантастика (851)
  • Боевик (66)
  • Боевое фэнтези (110)
  • Воспитание детей (14)
  • Героическая фантастика (129)
  • Героическое фэнтези (90)
  • Городское фэнтези (115)
  • Деловая литература (13)
  • Детективная фантастика (57)
  • Детективное фэнтези (25)
  • Детективы (132)
  • Детская литература (10)
  • Детская проза (10)
  • Документальная литература (21)
  • Драматургия (31)
  • Зарубежная деловая литература (53)
  • Зарубежная классика (38)
  • Зарубежная классическая проза (18)
  • Зарубежная образовательная литература (12)
  • Зарубежная прикладная литература (26)
  • Зарубежная психология (54)
  • Зарубежная публицистика (14)
  • Зарубежная фантастика (56)
  • Зарубежные детективы (118)
  • Зарубежные любовные романы (71)
  • Здоровое и правильное питание (14)
  • Здоровье (35)
  • Иронические детективы (57)
  • Иронический детектив, дамский детективный роман (105)
  • Историческая литература (25)
  • Историческая проза (50)
  • Историческая фантастика (46)
  • Исторические детективы (27)
  • Исторические любовные романы (44)
  • Исторические приключения (32)
  • Исторический детектив (64)
  • История (55)
  • Карьера, кадры (14)
  • Киберпанк (34)
  • Классическая проза (102)
  • Классический детектив (32)
  • Книги про волшебников (36)
  • Контркультура (19)
  • Короткие любовные романы (17)
  • Космическая фантастика (147)
  • Криминальный детектив (14)
  • Крутой детектив (17)
  • Легкая проза (23)
  • Литература 20 века (17)
  • ЛитРПГ (110)
  • Личная эффективность (29)
  • Любовное фэнтези (171)
  • Любовное фэнтези, любовно-фантастические романы (295)
  • Мистика (11)
  • Морские приключения (10)
  • Научная фантастика (165)
  • Научно-популярная литература (21)
  • Остросюжетные любовные романы (67)
  • Полицейские детективы (13)
  • Полицейский детектив (62)
  • Попаданцы (93)
  • Постапокалипсис (25)
  • Поэзия (10)
  • Приключения (13)
  • Приключения для детей и подростков (11)
  • Проза о войне (22)
  • Психология и психотерапия (53)
  • Публицистика (23)
  • Русская классическая проза (66)
  • Самиздат, сетевая литература (81)
  • Саморазвитие / личностный рост (15)
  • Самосовершенствование (17)
  • Семейные отношения, секс (16)
  • Сказки народов мира (19)
  • Советская классическая проза (26)
  • Современная зарубежная литература (127)
  • Современная русская и зарубежная проза (308)
  • Современная русская литература (85)
  • Современные детективы (82)
  • Современные любовные романы (165)
  • Социальная фантастика (46)
  • Социально-психологическая фантастика (35)
  • Триллер (77)
  • Триллеры (93)
  • Ужасы (58)
  • Фантастика (17)
  • Фантастика для детей (23)
  • Фэнтези (667)
  • Шпионский детектив (13)
  • Эзотерика, эзотерическая литература (12)
  • Эротическая литература (37)
  • Юмористическая проза (25)
  • Юмористическая фантастика (97)

ZoomTimeline : CSS Timeline Pack


July 19, 2016 | CSS2 / CSS3.0, HTML5, Premium

Looking for a company timeline ? A shipping log ? Shipping history ? Personal History ? A cool timeline slider ? This plugin has it all. No matter the needs for a timeline, the six modes included cover all the timeline needs.Awesome for – company timeline, time line, history, company history, shipping history, parcel track display, timeline slider.

  • HTML5 technology – zoomtimeline uses the latest html5 tehniques ( like Histroy API ) to deliver a never seen before experience to your clients
  • fully responsive – looks great from mobile to HD
  • five modes – full skins to fit every brand
  • CSS3 technology – this player uses cutting-edge css3
  • SCSS Powered – easy for developers to modify
  • Retina-ready – graphics have double resolution for smooth retina viewing
  • easy install – purchase, download the zip, read the docs
  • iPhone / iPad optimized – this gallery has been optimized for Apple touch devices

Как пользоваться?

После перехода на сайт необходимо нажать на кнопку Make a Timeline , далее – Get Spreadsheet Template и скачать электронную таблицу с примером. Названия существующих столбцов удалять или переименовывать нельзя, вам нужно только подставить свои данные.

Кратко опишем существующие столбцы в таблице. Начнем с одного из последних столбцов Type (тип) . Если мы выберем значение Title (заголовок), то нам не нужно строго прописывать время начала и окончания события. Тогда как Era (эра) строго требует заполнения первых восьми столбцов. Другими словами, от Типа (Type) будет зависеть вид и назначение таймлайна. Значение «Title» или «Era» выбирается один раз для всего проекта.

Последний столбец – Background – фоновый цвет в шестизначным формате . Нам не обязательно знать это формат для каждого цвета или оттенка. Достаточно набрать в браузере поисковый запрос «Таблица цветов» и открыть первый же источник с обозначением кода любого цвета.

После окончания работы над таймлайном необходимо выбрать команду «Файл» – «Опубликовать в интернете» в таблице Google. Скопируем появившуюся ссылку и вернемся на сайт Timeline JS . Выберем пункт 3 – «Copy/paste spreadsheet URL into the box below to generate your timeline. (Make sure you’ve published the spreadsheet.)» – т.е. вставим ссылку на таймлайн в данную область.

File Formats

JSON is the native data format for TimelineJS.

Remember, JSON is picky. A misplaced comma or quotation mark can prevent the timeline from loading properly.

Here is the full model:

Timeline can use a variation of JSONP to allow you to easily load data across different domains.

To allow this to happen, the file must end with the extension

Here is the full model:

If you don’t want to mess with JSON, fire up Google Docs and build your timeline in a spreadsheet. It’s as simple as dropping a date, text, and links into the appropriate columns in TimelineJS’s template.

There are only a couple things you need to know in order to create a timeline using Google Docs:

  1. Make the spreadsheet public: Google Docs are automatically set to private but the spreadsheet must be public.
  1. Publish to the Web Under the File menu, select “Publish to the Web.”

Support for Storify is still in its early stages. It works though. Just paste a link to the storify story as the source.

How To Create a Timeline

Step 1) Add HTML:

<div class=»timeline»>  <div class=»container left»>    <div class=»content»>      <h2>2017</h2>      <p>Lorem ipsum..</p>    </div>  </div>  <div class=»container right»>    <div class=»content»>      <h2>2016</h2>      <p>Lorem ipsum..</p>    </div>  </div></div>

Step 2) Add CSS:

* {  box-sizing: border-box;}/* Set a background color */ body {  background-color: #474e5d;  font-family: Helvetica, sans-serif;}/* The actual timeline (the vertical ruler) */.timeline {  position: relative;  max-width: 1200px;  margin: 0 auto;}/* The actual timeline (the vertical ruler) */.timeline::after {  content: »;  position: absolute;  width: 6px;  background-color: white;  top: 0;  bottom: 0;  left: 50%;  margin-left: -3px; }/* Container around content */ .container {  padding: 10px 40px;  position: relative;  background-color: inherit;  width: 50%;}/* The circles on the timeline */.container::after {  content: »;  position: absolute;  width: 25px;  height: 25px;  right: -17px;  background-color: white;  border: 4px solid #FF9F55;  top: 15px;  border-radius: 50%;  z-index: 1;}/* Place the container to the left */.left {  left: 0; }/* Place the container to the right */.right {  left: 50%; }/* Add arrows to the left container (pointing right) */.left::before {  content: » «;  height: 0;  position: absolute;  top: 22px;  width: 0;  z-index: 1;  right: 30px;  border: medium solid white;  border-width: 10px 0 10px 10px;  border-color: transparent transparent transparent white;}/* Add arrows to the right container (pointing left) */ .right::before {  content: » «;  height: 0;  position: absolute;  top: 22px;  width: 0;  z-index: 1;  left: 30px;  border: medium solid white;  border-width: 10px 10px 10px 0;  border-color: transparent white transparent transparent;}/* Fix the circle for containers on the right side */.right::after {  left: -16px;}/* The actual content */.content {  padding: 20px 30px;  background-color: white;  position: relative;  border-radius: 6px;}/* Media queries — Responsive timeline on screens less than 600px wide */@media screen and (max-width: 600px) {/* Place the timelime to the left */  .timeline::after {    left: 31px;  }/* Full-width containers */  .container {    width: 100%;    padding-left: 70px;    padding-right: 25px;  }/* Make sure that all arrows are pointing leftwards */  .container::before {    left: 60px;    border: medium solid white;    border-width: 10px 10px 10px 0;    border-color: transparent white transparent transparent;  }/* Make sure all circles are at the same spot */  .left::after, .right::after {    left: 15px;  }/* Make all right containers behave like the left ones */  .right {    left: 0%;  } }

OfficeTimeline

OfficeTimeline was designed to create timelines for business communications. It offers two options: an online tool and an offline PowerPoint add-in. The web tool is more advanced: it has more templates and export options, and the interface is much more user friendly.

Pros

  • You can download timelines as PPT, XLS or PDF, or send them via email.
  • Free version without watermarks or ads.
  • Has offline and online tools — pick whichever suits your workstyle.
  • Online tool has 39 templates to choose from.
  • Both tools allow you to add corporate branding.

Cons

  • Free offline version only has 3 templates, you have to upgrade to use the full library.
  • Can’t share timelines with a URL, only email sharing is available.
  • Timeline templates are good for executive summaries, but not for complex projects.
  • Online and offline tools have to be purchased separately.

Visme

Visme is an online multipurpose tool for creating timelines, presentations, and graphics. Timelines made with Visme come out clean and unique, and you can make really good ones even with the free version. If you want more templates and storage and privacy control options, there are 9 plans, including special offers for business owners and education centers.

Pros

  • You can create timelines in HTML5 and share them with a URL.
  • You can embed timelines on your website.
  • Free version without watermarks or ads.
  • A vast library of templates, styles, shapes, and graphs.
  • Each template offers a unique design that makes your template look fresh and professional.

Cons

  • Free version is limited to 5 projects.
  • Rather costly compared to other solutions. The cheapest plan is 14$ a month in a yearly plan.

Methods

The Timeline supports the following methods.

Method Return Type Description
clear() none

Clear the Timeline. An object can be passed specifying which sections to clear: items, groups, and/or options. By Default, items, groups and options are cleared, i.e. . Example usage:

timeline.clear();                // clear items, groups, and options
timeline.clear({options: true}); // clear options only
destroy() none Destroy the Timeline. The timeline is removed from memory. all DOM elements and event listeners are cleaned up.
fit() none Adjust the visible window such that it fits all items. See also function . Available options:
focus(id | ids ) none Adjust the visible window such that the selected item (or multiple items) are centered on screen. See also function . Available options:
getCurrentTime() Date Get the current time. Only applicable when option is true.
getCustomTime() Date Retrieve the custom time. Only applicable when the option is true.
getSelection() Number[] Get an array with the ids of the currently selected items.
getVisibleItems() Number[] Get an array with the ids of the currently visible items.
getWindow() Object Get the current visible window. Returns an object with properties and .
moveTo(time ) none Move the window such that given time is centered on screen. Parameter can be a , , or . Available options:
on(event, callback) none Create an event listener. The callback function is invoked every time the event is triggered. Avialable events: , , . The callback function is invoked as , where is an object containing event specific properties. See section .
off(event, callback) none Remove an event listener created before via function . See section .
redraw() none Force a redraw of the Timeline. Can be useful to manually redraw when option autoResize=false.
setCurrentTime(time) none Set a current time. This can be used for example to ensure that a client’s time is synchronized with a shared server time. can be a Date object, numeric timestamp, or ISO date string. Only applicable when option is true.
setCustomTime(time) none Adjust the custom time bar. Only applicable when the option is true. can be a Date object, numeric timestamp, or ISO date string.
setGroups(groups) none Set a data set with groups for the Timeline. can be an Array with Objects, a DataSet, or a DataView. For each of the groups, the items of the timeline are filtered on the property , which must correspond with the id of the group.
setItems(items) none Set a data set with items for the Timeline. can be an Array with Objects, a DataSet, or a DataView.
setOptions(options) none Set or update options. It is possible to change any option of the timeline at any time. You can for example switch orientation on the fly.
setSelection(id | ids ) none Select one or multiple items by their id. The currently selected items will be unselected. To unselect all selected items, call `setSelection([])`. Available options:
  • If true, focus will be set to the selected item(s)
  • If true (default), the range is animated smoothly to the new window. If a number, the number is taken as duration for the animation. Default duration is 500 ms. Only applicable when option focus is true.
setWindow(start, end ) none Set the current visible window. The parameters and can be a , , or . If the parameter value of or is null, the parameter will be left unchanged. Available options:

Templates

Timeline supports templates to format item contents. Any template engine (such as handlebars or mustache) can be used, and one can also manually build HTML. In the options, one can provide a template handler. This handler is a function accepting an items data as argument, and outputs formatted HTML:

var options = {
  template: function (item) {
    var html = ... // generate HTML markup for this item
    return html;
  }
};

Using a template engine

handlebars

<script id="item-template" type="text/x-handlebars-template">
  <h1>{{header}}</h1>
  <p>{{description}}</p>
</script>
var source = document.getElementById('item-template').innerHTML;
var template = Handlebars.compile(source);
var options = {
  template: template
};

Multiple templates

var templates = {
  template1: Handlebars.compile(...),
  template2: Handlebars.compile(...),
  template2: Handlebars.compile(...),
  ...
};

var options = {
  template: function (item) {
    var template = templates;  // choose the right template
    return template(item);                    // execute the template
  }
};

Планируйте проекты с помощью шаблонов таймлайнов спринтов


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

ИСПОЛЬЗОВАТЬ ШАБЛОН ТАЙМЛАЙНА

Можно также взять за основу для таймлайна этапы проекта и указать количество дней, отведенных на их выполнение. Посмотрите, как это сделано в следующем шаблоне таймлайна строительства дома:

ИСПОЛЬЗОВАТЬ ШАБЛОН ТАЙМЛАЙНА

Вы можете пойти дальше и составить план-график на весь предстоящий год. Спланируйте важнейшие этапы по месяцам:

ИСПОЛЬЗОВАТЬ ШАБЛОН ТАЙМЛАЙНА

В этом шаблоне таймлайна используется тот же подход, только месяцы и текст обозначены разными цветами:

ИСПОЛЬЗОВАТЬ БЕСПЛАТНЫЙ ШАБЛОН ТАЙМЛАЙНА

Предлагаем также прочесть статью с более чем 15 шаблонами таймлайнов проектов, посвященную планированию бизнес-целей. А еще вы можете просмотреть наши шаблоны диаграмм Гантта, чтобы получить дополнительные идеи по визуализации проектов.

TimeRime

В TimeRime можно не просто работать преподавателям и ученикам, но даже создать закрытую школьную сеть (пакет Edu School обойдется школе в 150 евро в год). Мало того, TimeRime прекрасно взаимодействует с интерактивными досками SMART Board. Сервисом уже пользуется университет Портсмута (Великобритания), Лёвенский католический университет (Бельгия) и один из крупнейших голландских колледжей ROC Midden.

Бесплатный аккаунт TimeRime разрешает создавать неограниченное число таймлайнов по 100 событий. Правда, результат выглядит несколько старомодно и не разворачивается во весь экран, да и скорость работы оставляет желать лучшего.

Data Format

The timeline can be provided with two types of data:

  • containing a set of items to be displayed in time.
  • containing a set of groups used to group items together.

Items

The Timeline uses regular Arrays and Objects as data format. Data items can contain the properties , (optional), , (optional), and (optional).

A table is constructed as:

var items = [
  {
    start: new Date(2010, 7, 15),
    end: new Date(2010, 8, 2),  // end is optional
    content: 'Trajectory A'
    // Optional: fields 'id', 'type', 'group', 'className'
  }
  // more items...
]);

The item properties are defined as:

Name Type Required Description
className String no This field is optional. A className can be used to give items an individual css style. For example, when an item has className ‘red’, one can define a css style like:
.vis.timeline .red {
  color: white;
  background-color: red;
  border-color: darkred;
}
More details on how to style items can be found in the section .
content String yes The contents of the item. This can be plain text or html code.
end Date no The end date of the item. The end date is optional, and can be left . If end date is provided, the item is displayed as a range. If not, the item is displayed as a box.
group any type no This field is optional. When the group column is provided, all items with the same group are placed on one line. A vertical axis is displayed showing the groups. Grouping items can be useful for example when showing availability of multiple people, rooms, or other resources next to each other.
id String | Number no An id for the item. Using an id is not required but highly recommended. An id is needed when dynamically adding, updating, and removing items in a DataSet.
start Date yes The start date of the item, for example .
title String none Add a title for the item, displayed when holding the mouse on the item. The title can only contain plain text.
type String ‘box’ The type of the item. Can be ‘box’ (default), ‘point’, ‘range’, or ‘background’. Types ‘box’ and ‘point’ need a start date, the types ‘range’ and ‘background’ needs both a start and end date.

Groups

Like the items, groups are regular JavaScript Arrays and Objects. Using groups, items can be grouped together. Items are filtered per group, and displayed as

Group items can contain the properties , , and (optional).

Groups can be applied to a timeline using the method . A table with groups can be created like:

var groups = [
  {
    id: 1,
    content: 'Group 1'
    // Optional: a field 'className'
  }
  // more groups...
]);

Groups can have the following properties:

Name Type Required Description
className String no This field is optional. A className can be used to give groups an individual css style. For example, when a group has className ‘red’, one can define a css style . More details on how to style groups can be found in the section .
content String yes The contents of the group. This can be plain text or html code.
id String | Number yes An id for the group. The group will display all items having a property which matches the of the group.
title String none A title for the group, displayed when holding the mouse the groups label. The title can only contain plain text.

Add it to your site

<divid="timeline-embed"><div><scripttype="text/javascript">var timeline_config ={            width'100%',            height'600',            source'path_to_json/or_link_to_googlespreadsheet',            embed_id'timeline-embed',            start_at_endfalse,            start_at_slide'4',            start_zoom_adjust'3',            hash_bookmarktrue,            font'Bevan-PotanoSans',            debugtrue,            lang'fr',            maptype'watercolor',            css'path_to_css/timeline.css',            js'path_to_js/timeline-min.js'}</script><scripttype="text/javascript"src="http://cdn.knightlab.com/libs/timeline/latest/js/storyjs-embed.js"></script>

You could also initialize a new timeline using the method after has been loaded

createStoryJS({        type'timeline',        width'800',        height'600',        source'path_to_json/or_link_to_googlespreadsheet',        embed_id'my-timeline'});

Here’s a simple example:

<head><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><scripttype="text/javascript"src="http://cdn.knightlab.com/libs/timeline/latest/js/storyjs-embed.js"></script><script>$(document).ready(function(){createStoryJS({                    type'timeline',                    width'800',                    height'600',                    source'path_to_json/or_link_to_googlespreadsheet',                    embed_id'my-timeline'});});</script></head><body><divid="my-timeline"><div></body>

If you like, you may load TimelineJS from the KnightLab’s CDN. The examples above demonstrate how to do this using , which is the simplest way to set up a Timeline of your own.

If for some reason you need more fine-grained control over your timeline, load the javascript and CSS files separately. We recommend that you load them from our CDN.

<linkrel="stylesheet"type="text/css"href="http://cdn.knightlab.com/libs/timeline/latest/css/timeline.css"><scripttype="text/javascript"src="http://cdn.knightlab.com/libs/timeline/latest/js/timeline.js"><script><scripttype="text/javascript"src="http://cdn.knightlab.com/libs/timeline/latest/js/timeline-min.js"><script>

If you need to use the files on an HTTPS server, you can change the beginning of the url from to

Example

The following code shows how to create a Timeline and provide it with data. More examples can be found in the examples directory.

<!DOCTYPE HTML>
<html>
<head>
  <title>Timeline | Basic demo</title>

  <style type="text/css">
    body, html {
      font-family: sans-serif;
    }
  </style>

  <script src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="visualization"></div>

<script type="text/javascript">
  // DOM element where the Timeline will be attached
  var container = document.getElementById('visualization');

  // Create a DataSet (allows two way data-binding)
  var items = new vis.DataSet();

  // Configuration for the Timeline
  var options = {};

  // Create a Timeline
  var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

Timeline

2017

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

<div class=»timeline»>  <div class=»container left»>    <div class=»content»>      <h2>2017</h2>      <p>Lorem ipsum..</p>    </div>  </div>  <div class=»container right»>    <div class=»content»>      <h2>2016</h2>      <p>Lorem ipsum..</p>    </div>  </div></div>

Step 2) Add CSS:

* {  box-sizing: border-box;}/* Set a background color */ body {  background-color: #474e5d;  font-family: Helvetica, sans-serif;}/* The actual timeline (the vertical ruler) */.timeline {  position: relative;  max-width: 1200px;  margin: 0 auto;}/* The actual timeline (the vertical ruler) */.timeline::after {  content: »;  position: absolute;  width: 6px;  background-color: white;  top: 0;  bottom: 0;  left: 50%;  margin-left: -3px; }/* Container around content */ .container {  padding: 10px 40px;  position: relative;  background-color: inherit;  width: 50%;}/* The circles on the timeline */.container::after {  content: »;  position: absolute;  width: 25px;  height: 25px;  right: -17px;  background-color: white;  border: 4px solid #FF9F55;  top: 15px;  border-radius: 50%;  z-index: 1;}/* Place the container to the left */.left {  left: 0; }/* Place the container to the right */.right {  left: 50%; }/* Add arrows to the left container (pointing right) */.left::before {  content: » «;  height: 0;  position: absolute;  top: 22px;  width: 0;  z-index: 1;  right: 30px;  border: medium solid white;  border-width: 10px 0 10px 10px;  border-color: transparent transparent transparent white;}/* Add arrows to the right container (pointing left) */ .right::before {  content: » «;  height: 0;  position: absolute;  top: 22px;  width: 0;  z-index: 1;  left: 30px;  border: medium solid white;  border-width: 10px 10px 10px 0;  border-color: transparent white transparent transparent;}/* Fix the circle for containers on the right side */.right::after {  left: -16px;}/* The actual content */.content {  padding: 20px 30px;  background-color: white;  position: relative;  border-radius: 6px;}/* Media queries — Responsive timeline on screens less than 600px wide */@media screen and (max-width: 600px) {/* Place the timelime to the left */  .timeline::after {    left: 31px;  }/* Full-width containers */  .container {    width: 100%;    padding-left: 70px;    padding-right: 25px;  }/* Make sure that all arrows are pointing leftwards */  .container::before {    left: 60px;    border: medium solid white;    border-width: 10px 10px 10px 0;    border-color: transparent white transparent transparent;  }/* Make sure all circles are at the same spot */  .left::after, .right::after {    left: 15px;  }/* Make all right containers behave like the left ones */  .right {    left: 0%;  } }


С этим читают