Вертикальная хронология событий

demosourse

Сегодняшний пример — это визуальное представление данных в виде вертикальной хронологии событий.

Множество данных можно отобразить в вертикальной хронологии. Источником вдохновения стала страница Zurb University.

Создание структуры

Помещаем интересующий нас компонент в блок <section>. Блок .cd-timeline-block будет секцией контента. Так же мы разделим иконку и текст по разным блокам.

<section id="cd-timeline">
    <div class="cd-timeline-block">
        <div class="cd-timeline-img">
            <img src="img/cd-icon-picture.svg" alt="Picture">
        </div> <!-- cd-timeline-img -->

        <div class="cd-timeline-content">
            <h2>Title of section 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
            <a href="#0" class="cd-read-more">Read more</a>
            <span class="cd-date">Jan 14</span>
        </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->

    <div class="cd-timeline-block">
        <!-- ... -->
    </div>
</section>

Стили

Мы применили селектору ::before абсолютное позиционирование, для вертикального размещения элементов. Изображения так же позиционируются абсолютно, что позволяет добиться адаптивности, добавив margin-left контейнеру с текстом.

#cd-timeline {
  position: relative;
  padding: 2em 0;
  margin-top: 2em;
  margin-bottom: 2em;
}
#cd-timeline::before {
  /* this is the vertical line */
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  height: 100%;
  width: 4px;
  background: #d7e4ed;
}

Анимацию изображений и текста будет осуществляться только на устройствах с крупными экранами. Для анимации воспользуемся двумя классами: .is-hidden для скрытия всех элементов из поля видимости; при прокрутке страницы, будем добавлять класс .bounce-in к элементам .cd-timeline-img и .cd-timeline-content.

.cssanimations .cd-timeline-img.is-hidden {
  visibility: hidden;
}
.cssanimations .cd-timeline-img.bounce-in {
  visibility: visible;
  animation: cd-bounce-1 0.6s;
}

@keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  60% {
    opacity: 1;
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

Обработка событий

Воспользуемся jQuery для скрытия блоков из области видимости, прикрепив к элементам класс .is-hidden. При прокрутке страницы, к тем блокам, которые попадут в область видимости добавим класс .bounce-in к элементам .cd-timeline-img и .cd-timeline-content (удаляем класс .is-hidden) для вызова анимации.

$(window).on('scroll', function(){
	$timeline_block.each(function(){
		if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.75 && $(this).find('.cd-timeline-img').hasClass('is-hidden') ) {
			$(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
		}
	});
});

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/vertical-timeline/
Перевел: Станислав Протасевич
Урок создан: 21 Февраля 2016
Просмотров: 7627
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^