Автор

30 12.2015
Временная шкала для сайта с помощью 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);
ЧЧ: ММ -> только время (для событий, происходящих в тот же день).

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


vk.com/club.ssdru

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


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

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

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


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

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


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

Если вы используете какие то графические редакторы на сайте, или просто хотите скрасить некий материал с помощью выбора цвета, или дать возможность оформить на свой вкус комментарии пользователю тогда этот урок именно для Вас. В сегодняшнем уроке речь пойдет о скрипте Flexi Color Picker, который использует только JavaScript для создания интерфейса выбора цвета. Без flash, изображений, однопиксельных div. Для его работы не нужно никаких библиотек.


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close