Сегодняшний ресурс - это легко настраиваемая, гибкая новостная лента. Мы использовали некоторые трюки 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');
}
});
});