Автор

Временная шкала для сайта с помощью CSS3

Временная шкала для сайта с помощью CSS3


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

 

ДЕМО
ИСХОДНИКИ

 

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

HTML

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

<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>
 

</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>

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

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%);
}
}

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

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

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

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

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

Вот и все. Готово!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеCSS3

Временная шкала для сайта с помощью CSS3

Сегодня я расскажу вам, как создавать различные CSS3  эффектов. Мы использовали javascript. В результате страницы галереи у нас будет 9 образов, каждый из которых имеет собственный hover эффект.


Временная шкала для сайта с помощью CSS3

Скрипт представляет собой нечто вроде плагина. Для чего можно использовать выдвижную панель? Вы можете создать выдвижной блок «Контакты» на сайт, это будет полезно, например, для сайтов с портфолио.


Временная шкала для сайта с помощью CSS3

Любой вебразработчик или дизайнер сайтов, которому когда-либо доводилося ознакомиться со стилевою системою Twitter Bootstrap, уж конечно помнит, что в ней применяются значки Glyphicons (120 штук) для оформления кнопок, и панелей инструментов, и пунктов в списках, и так далее. Распространяются эти значки бесплатно и свободно (по лицензии CC BY 3.0).


Временная шкала для сайта с помощью CSS3

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


87 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close