Все для веб-дизайнера
Адаптивная временная шкала для сайта на jQuery
Временная шкала дает возможность наглядно организовать материал на сайте и преподнести его посетителю, ранее мы уже не раз публиковали подобные уроки, но сегодня мы хотим показать как можно сделать простую и в то же время удобную и практичную временную шкалу. Кроме этого временная шкала будет анимированной по мере прокрутки страницы будут добавляться новые материалы подлетая к шкале. Также все это будет адаптивным, что позволит правильно отобразиться на различных устройствах с разным разрешением экрана.
Для достижения функций такой шкалы нам понадобиться плагин jQuery. Отзывчивый, вертикальный, анимированный плагин временной шкалы, который скользит при прокручивании мышки с привлекательной CSS3 анимацией. Данный плагин поддерживает любые типы мультимедиа, такие как изображения, обычный текст, видео HTML5 и многое другое.
Вертикальная временная шкала автоматически сворачивается в карточный вид при работе на небольшом экране (например, на мобильных и планшетных устройствах). Давайте приступим. Мы использовали следующие правила и библиотеки:
- jQuery.
- Bootstrap (для адаптивного макета).
- Font Awesome (для иконок).
- Animate.css (для простой анимации).
- Wow.js (для отображения анимации при прокрутке).
Шаг 1. HTML
Для начала загрузите необходимые jQuery, Bootstrap и font Awesome в документ html:
|
1 2 3 |
<link rel="stylesheet" href="/path/to/bootstrap.min.css"> <link rel="stylesheet" href="/path/to/font-awesome.min.css"> <script src="/path/to/jquery.min.js"></script> |
Затем нам необходимо подключить стили таблицы style.css и javascript timeline.js к нашему документу:
|
1 2 |
<link rel="stylesheet" href="css/style.css"> <script src="js/timeLine.js"></script> |
Далее мы добавляем наши истории во временную шкалу, мы немного сократили для демонстрации, полный код можете посмотреть в исходниках к данному уроку:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 item" > <div class="caption"> <div class="star center-block"> <span class="h3">27</span> <span>Jan</span> <span>1990</span> </div> <div class="image"> <img src="img/born.jpg"> <div class="title"> <h2>Started to Breath <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></h2> </div> </div> <div class="textContent"> <p class="lead">Текст.</p> </div> </div> </div> |
С разметкой, вроде, разобрались, давайте перейдем к следующему шагу, а именно инициализации плагина.
Шаг 2. JS
Чтобы включить плагин к желаемой странице, нам необходимо добавить следующий код:
|
1 |
$('.timeLine').timeLine(); |
Вы можете самостоятельно настроить временную шкалу, мы установили параметры по умолчанию, как показано ниже, но вы можете легко их изменить:
|
1 2 3 4 5 6 7 8 9 10 |
$('.timeLine').timeLine({ myTimeLine: this, mainColor: '', //Цвет временной шкалы opacity: '0.5', offset: '400', itemAnimateDuration: 2, lineColor: '#DDDDDD', Left RightAnimation: 'rotateInUpLeft', }); |
В результате у нас получается такая замечательная временная шкала, которую легко можно активировать и подключить к своему сайту, чтобы наглядно подать информацию посетителю.
Вот и все. Готово!
Интересно:
| Опубликовал admin 26.04.2018 в 13:03, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...