Автор

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

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


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

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


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

В данном уроке мы создадим интересные визуальные 3D эффекты с помощью CSS3 и jQuery. Идея для урока возникла под впечатлением страниц демонстрации проектов Google SketchUp.

В нашем примере мы будем использовать миниатюры, которые открывают дополнительную информацию при наведении курсора мыши на них. Структура будет построена на jQuery, который позволит вывести изображение в сложенном или отогнутом виде при наведении курсора мыши. Для формирования эффектов будем использовать трансформации CSS 3D. В тексте урока префиксы браузеров опущены для большей наглядности. Полный код можно посмотреть в исходниках к уроку.


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close