Создаем временную шкалу для сайта на CSS3

Stats: 2071 0
Author: RUDEBOX
Category: Технології
Comments: Комментариев нет

Заказать рекламу: info@it-media.kiev.ua Звоните: +380934169249

В данном уроке мы хотели бы рассказать и показать, как можно создать достаточно простую горизонтальную временную шкалу для сайта, с удобной навигацией и анимированным слайдом при переходе к необходимому контенту. Каждая точка времени на шкале будет кликабельной, пользователь может воспользоваться как ползунком, так и навигацией с помощью точек. При нажатии на точку, будет происходить событие, в результате которого будет отображаться информация на заданном временном отрезке. Все работает очень плавно и привлекательно.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

Шаг 1. HTML

HTML структура состоит из двух основных упорядоченных списков. Первый будет содержать сроки и даты, во втором будут cодержаться события, которые будут отображаться ниже.

</p>

<div class="timeline">
<div class="events-wrapper">
<div class="events">
<ol>
	<li><a class="selected" href="#0" data-date="20/12/2015">20 декабря</a></li>
	<li><a href="#0" data-date="01/01/2016">01 января</a></li>
</ol>
&nbsp;

</div>
</div>
<ul class="cd-timeline-navigation">
	<li><a class="prev inactive" href="#0">Назав</a></li>
	<li><a class="next" href="#0">Вперед</a></li>
</ul>
</div>
<div class="events-content">
<ol>
	<li class="selected" data-date="20/12/2015">
<h2>Заголовок</h2>
<em>"20" декабря 2015</em>

Описание</li>
	<li data-date="01/01/2016"></li>
</ol>
</div>

</p>

<ol>

<li><a class="selected" href="#0" data-date="20/12/2015">20 декабря</a></li>

<li><a href="#0" data-date="01/01/2016">01 января</a></li>

</ol>

</div>

<li><a class="prev inactive" href="#0">Назав</a></li>

<li><a class="next" href="#0">Вперед</a></li>

</ul>

</div>

<ol>

<h2>Заголовок</h2>

<em>"20" декабря 2015</em>

Описание</li>

</ol>

</div>

Дополнительное правило ul.cd-timeline-navigation было использовано для навигации стрелками span.filling-line, а также для создания эффекта наполнения, когда выбрано новое событие.

Шкала времени для сайта с помощью CSS

Шаг 2. CSS

Давайте начнем с событий которые будут размещены в стиле: все элементы которые пересчитываются влево, вне видового экрана , будут установлены с параметроми (translateX(-100%));. Затем класс .selected будет добавляется для видимого элемента событий, чтобы переместить его обратно в окно просмотра (translateX(0)).

4 классы были использованы для создания слайдера анимации: enter-right/.enter-left - классы добавлены к выбранному пункту событий, входящего в окно просмотра справа / слева, и .leave-right/.leave-left - классы добавлены к пунктам событий котрые двигаются вправо / влево. Эти классы используются для применения двух различных анимаций CSS: cd-enter-right и cd-enter-left.

.cd-horizontal-timeline .events-content {
position: relative;
}
.cd-horizontal-timeline .events-content li {
position: absolute;
z-index: 1;
width: 100%;
left: 0;
top: 0;
transform: translateX(-100%);
opacity: 0;
animation-duration: 0.4s;
animation-timing-function: ease-in-out;
}
.cd-horizontal-timeline .events-content li.selected {
position: relative;
z-index: 2;
opacity: 1;
transform: translateX(0);
}
.cd-horizontal-timeline .events-content li.enter-right,
.cd-horizontal-timeline .events-content li.leave-right {
animation-name: cd-enter-right;
}
.cd-horizontal-timeline .events-content li.enter-left,
.cd-horizontal-timeline .events-content li.leave-left {
animation-name: cd-enter-left;
}
.cd-horizontal-timeline .events-content li.leave-right,
.cd-horizontal-timeline .events-content li.leave-left {
animation-direction: reverse;
}
@keyframes cd-enter-right {
0% {
opacity: 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
@keyframes cd-enter-left {
0% {
opacity: 0;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}

.cd-horizontal-timeline .events-content {

position: relative;

}

.cd-horizontal-timeline .events-content li {

position: absolute;

z-index: 1;

width: 100%;

left: 0;

top: 0;

transform: translateX(-100%);

opacity: 0;

animation-duration: 0.4s;

animation-timing-function: ease-in-out;

}

.cd-horizontal-timeline .events-content li.selected {

position: relative;

z-index: 2;

opacity: 1;

transform: translateX(0);

}

.cd-horizontal-timeline .events-content li.enter-right,

.cd-horizontal-timeline .events-content li.leave-right {

animation-name: cd-enter-right;

}

.cd-horizontal-timeline .events-content li.enter-left,

.cd-horizontal-timeline .events-content li.leave-left {

animation-name: cd-enter-left;

}

.cd-horizontal-timeline .events-content li.leave-right,

.cd-horizontal-timeline .events-content li.leave-left {

animation-direction: reverse;

}

@keyframes cd-enter-right {

0% {

opacity: 0;

transform: translateX(100%);

}

100% {

opacity: 1;

transform: translateX(0%);

}

@keyframes cd-enter-left {

0% {

opacity: 0;

transform: translateX(-100%);

}

100% {

opacity: 1;

transform: translateX(0%);

}

О датах: позиция каждой даты по шкале устанавливается с помощью JQuery. Сроки не равномерно распределены по шкале, но расстояние между датой и следующий пропорциональна разнице между этими датами.

Прежде всего, в файле main.js, мы устанавливаем минимальное расстояние между двумя последовательными датами, используя eventsMinDistance переменную; в нашем случае, мы устанавливаем eventsMinDistance = 60 (так минимальное расстояние будет 60px). Затем мы оцениваем все различия между датами; для этого мы используем data-date атрибут, который добавлен в каждую дату. Минимальная дистанция времени затем будет использоваться в качестве основания для оценки расстояния между двумя последовательными датами.

Например, давайте предположим, что минимальная нашли разница составляет 5 дней; что означает, что расстояние, на временной шкале, между двумя датами, разделенных течением в 5 дней будет 60px, а тот, между двумя событиями, разделение по прошествии 10 дней будет составлять 120px.

О формате даты: мы использовали формат даты ДД / ММ / YYYY, но вы также можете добавить время, если вам нужно принять это во внимание. Есть 3 различных форматов даты вы можете использовать:

ДД / ММ / ГГГГ -> только дни;
ДД / ММ / YYYYTHH: ММ -> если вам нужно учитывать время (например, 02/10/2015 19:45);
ЧЧ: ММ -> только время (для событий, происходящих в тот же день).