Адаптивная временная шкала для сайта на jQuery

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

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

Для достижения функций такой шкалы нам понадобиться плагин jQuery. Отзывчивый, вертикальный, анимированный плагин временной шкалы, который скользит при прокручивании мышки с привлекательной CSS3 анимацией. Данный плагин поддерживает любые типы мультимедиа, такие как изображения, обычный текст, видео HTML5 и многое другое.

Вертикальная временная шкала автоматически сворачивается в карточный вид при работе на небольшом экране (например, на мобильных и планшетных устройствах). Давайте приступим. Мы использовали следующие правила и библиотеки:

jQuery.
Bootstrap (для адаптивного макета).
Font Awesome (для иконок).
Animate.css (для простой анимации).
Wow.js (для отображения анимации при прокрутке).

Шаг 1. HTML

Для начала загрузите необходимые jQuery, Bootstrap и font Awesome в документ html:

Затем нам необходимо подключить стили таблицы style.css и javascript timeline.js к нашему документу:

1 2	<link rel="stylesheet" href="css/style.css"> <script src="js/timeLine.js"></script>

Далее мы добавляем наши истории во временную шкалу, мы немного сократили для демонстрации, полный код можете посмотреть в исходниках к данному уроку:

</div>

<h2>Started to Breath <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></h2>

</div>

<p class="lead">Текст.</p>

</div>

С разметкой, вроде, разобрались, давайте перейдем к следующему шагу, а именно инициализации плагина.

Шаг 2. JS

Чтобы включить плагин к желаемой странице, нам необходимо добавить следующий код:

1	$('.timeLine').timeLine();

Вы можете самостоятельно настроить временную шкалу, мы установили параметры по умолчанию, как показано ниже, но вы можете легко их изменить:

$('.timeLine').timeLine({

myTimeLine: this,

mainColor: '', //Цвет временной шкалы

opacity: '0.5',

offset: '400',

itemAnimateDuration: 2,

lineColor: '#DDDDDD',

Left

RightAnimation: 'rotateInUpLeft',

});

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