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

 

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

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

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

Шаг 1. HTML

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

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

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

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

Шаг 2. JS

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

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

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

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

 

Читайте также: