Адаптивная вертикальная новостная лента на CSS3 и jQuery

Сегодняшний ресурс - это легко настраиваемая, гибкая новостная лента. Мы использовали некоторые трюки CSS3 и немного jQuery для создания анимаций, которые влияют только на пользователей настольных компьютеров, тогда как на мобильных устройствах структура более минимальна.

 

ДЕМО

ИСХОДНИКИ

 

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

 

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

Мы намотали всю временную шкалу на элемент <section>. Блок .cd-timeline-block представляет собой block содержимого. Мы, наконец, разделили изображение / значок и текстовое содержимое на 2 раздела divs.

<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 ........ 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 селектором в абсолютном положении для создания вертикальной линии. Изображения / значки находятся в абсолютном положении, таким образом, было очень легко создать отзывчивую структуру, просто добавив маркер слева к текстовому контенту.

#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;
}

Были созданы 2 анимации вставки, как для изображения / значка, так и для текстового контента, которые видны только для пользователей настольных компьютеров. Чтобы анимация работала, нам пришлось создать 2 класса: .is-hidden, который используется для скрытия по умолчанию всех блоков контента, которые находятся вне области просмотра; При прокрутке пользователя мы добавляем класс .bounce-in к содержимому .cd-timeline-img и .cd-timeline, чтобы сделать элементы видимыми и запускать анимацию.

.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');
		}
	});
});

 

Вот и всё!

---