Автор

Временная шкала для сайта с помощью 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



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

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

Градиент является прекрасным инструментом манипуляции с цветом в CSS3. Вместо того, чтобы использовать изображение, для создания эффекта градиента на веб-странице, куда выгодней будет воспользоваться CSS3 градиентом и тем самым «облегчить» сайт. Так как пользователю не нужно будет тратить времени и трафика на загрузку фонового изображения. Существует два основных вида градиента: радиальный и линейный. Сегодняшний пост будет именно о них.


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

Экспериментальная полноэкранная навигация, анимированная с использованием CSS и jQuery, которая расширяется в пределах круга.


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

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


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

И снова параллакс на jQuery, но довольно-таки интересный вариант и я думаю многие захотят на своем сайте иметь чтото подобное, так как практически это многослойный параллакс эффект, просто посмотрите демо и всё станет ясно!


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close