Меню

Вертикальный адаптивный таймлайн

Привет, в этом эксперименте ми создадим адаптивный вертикальный таймлайн в стиле плоского (флэт) дизайна на html5 та css3.

дизайн поста в таймлайне

Эскиз. Концепция таймлайна.

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

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

Design Tickle

Чтобы было интереснее сначала посмотрим живой пример

Здесь видно как реальный контент может быть представлен в формате таймлайна. Для демки я взял эволюцию дизайна и веб технологий. А также давайте поиграем с цветами, используя палитру флэт-юи, здесь это предусмотрено и дает интересные результаты

Midnight Blue Belize Hole Turquoise Nephritis Sun Flower Orange Alizarin Wisteria

Present trends

Responsive Web Design (RWD), Flat design, parallax scrolling

2012-nowadays

Responsive web design (RWD)

responsive web design

Ethan Marcotte coined the term responsive web design (RWD) in a May 2010 article in A List Apart.He described the theory and practice of responsive web design in his brief 2011 book titled Responsive Web Design.

Responsive design was listed as #2 in Top Web Design Trends for 2012 by .net magazine after progressive enhancement at #1.

Responsive web templates are designed to look great on a variety of different screen sizes, so anyone can view your site in a crisp and clear manner where ever they go.

responsive web design

A site designed with RWDadapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule.

2011-nowadays

Parallax scrolling

The Parallax web design trend has grown in popularity because it creates an illusion of depth (or a faux-3D effect) as you scroll through the webpage. Various images on the site will move at different speeds or change in size or at dimension to the site.

parallax scheme

Additionally, proponents use parallax backgrounds as a tool to better engage users and improve the overall experience that a website provides.

2010-nowadays

Flat UI Design

Flat design refers to a style of interface design which removes any stylistic choices that give the illusion of three-dimensions (such as drop shadows, gradients, or textures) and is focused on a minimalist use of simple elements, typography and flat colors.

flat ui design example

A website with flat design lacks gradients, skeuomorphism, but incorporates solid colors, white space, and crisp typography.

Late 2000's

Rise of HTML5, opensource, mobile web

April 2010

Rise of HTML5

html5 logo

HTML5 became the topic of mainstream media around April 2010 after Apple Inc's then-CEO Steve Jobs issued a public letter titled "Thoughts on Flash" where he concludes that "[Adobe] Flash is no longer necessary to watch video or consume any kind of web content" and that "new open standards created in the mobile era, such as HTML5, will win".

In early November 2011, Adobe announced that it will discontinue development of Flash for mobile devices and reorient its efforts in developing tools utilizing HTML5.

2008 - 2010

The mobile web

world in your hand with mobile web

The mobile web refers to access to the world wide web, i.e. the use of browser-based Internet services, from a handheld mobile device, such as a smartphone or a feature phone, connected to a mobile network or other wireless network.

Many businesses looked towards creating a condensed 'mobile' version of their site. Mobile sites contain essentials of the regular website, delivering viewers flagship content and noble features formatted for display on their device.

be more social with mobile web

Mobile sites contain essentials of the regular website, delivering viewers flagship content and noble features formatted for display on their device.

The Mobile Web has also been called Web 3.0, drawing parallels to the changes users were experiencing as Web 2.0 websites proliferated.

April 2008

Rise of the open-source

The pivotal moment, however, was the creation of git, which has since become the most popular DVCS.

opensource logo

The increasing popularity of open source DVCSs such as git, and then, later, DVCS hosting sites, the most popular of which is GitHub (founded 2008), incrementally reduced the barriers to participation in free software projects still further.

github octocat

With sites like GitHub, no longer did potential contributors have to do things like hunt for the URL for the source code repository (which could be in different places on each website, or sometimes tucked away in a README file or developer documentation), or work out how to generate a patch, and if necessary subscribe to the right mailing list so that their patch email would get to the right people.

... и я думаю что для примера этого достаточно.

Но если вас заинтересовала полная версия таймлайна "Эволюция веб дизайна" - можете посетить эту страницу или вот эту, там классная инфографика в картинках

Так, теперь поговорим о разметке:


<section class="timeline">
	<div class="timeline_milestone"></div>	
	<article class="timeline_post">
		<h1 class="tl-post_date"></h1>		
		<div class="tl-post_card">
			<header class="tl-post_header"></header>
			<div class="tl-post_content">
				<div class="content_wrap"></div>
			</div>
			<div class="tl-post_footer"></div>
		</div>
	</article>
</section>	
					
Базовая разметка таймлайна

Этот блок кода - упрощенный концепт таймлайна без внутренних элементов, так сказать контейнер, дает нам представление о структуре.
Состоит из основного раздела таймлайна (timeline section), который содержит заголовки-указатели (milestones) и собственно заметки (articles). Заметка в свою очередь содержит ярлык с датой (post-date) и карточку с контентом поста (post-card)
Post card - "карта", блок содержащий основной контент и включает в себя:

Вот и результат этой разметки:

Выглядит довольно не интересно, поэтому добавим внутренних элементов


<section class="timeline">
	<div class="timeline_milestone">						
		<h2 class="milestone_title"></h2><!--Milestone title-->
		<p class="milestone_meta"></p><!--Milestone meta information or annotation-->
	</div>
	<article class="timeline_post">
		<h1 class="tl-post_date"></h1><!--Date, that will be shown in colored label-->
		<div class="tl-post_card">
			<header class="tl-post_header">
				<h2 class="tl-post_title"></h2><!--Post title-->
				<p class="tl-post_meta"></p><!--Post meta or resume-->
			</header>
			<div class="tl-post_content">
				<div class="content_wrap">
					<img class="tl-post_image" src="" alt=""><!--post image-->						
					<p class="tl-post_text">Post text</p><!--Post paragraph-->
				</div>
			</div>
			<div class="tl-post_footer">
				<p class="tl-post_tags">Tags:
					<span>Some tag</span>
					<span>Another tag</span>
				</p><!--Post related tags-->
				<a class="tl-post_readmore" href="" title="">Read more...</a><!--Link to related full article or original source-->	
			</div>
		</div>
	</article>
</section>	
					
Полная разметка таймлайна

Вот, теперь все в порядке и выглядит довольно прилично!

Lorem ipsum

Milestone meta information or annotation

Some date

Some post title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium ac turpis in lobortis. Ut ligula ante, mattis vel augue eget, tincidunt vehicula nisi.

image example

Curabitur pretium commodo faucibus. Aliquam eget dictum odio. Morbi a pellentesque nibh. Suspendisse consequat augue laoreet lacus aliquet, sed vestibulum augue semper.

image example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium ac turpis in lobortis. Ut ligula ante, mattis vel augue eget, tincidunt vehicula nisi.

Я думаю с внутренними элементами все более-менее понятно, но есть один момент с картинками. Дело в том, что имеется два дополнительных класса для плавающих изображений. И .js-lazy класс для ленивой загрузки картинок. Подробнее об этой штуке читайте в разделе яваскриптов


	<img class="tl-post_image" src="" alt=""><!--full size centered image-->
	<img class="tl-post_image left" src="" alt=""><!-- 40% left floated image-->
	<img class="tl-post_image right" src="" alt=""><!--40% right floated image-->
					
Разметка изображений

А теперь время стилей!

Должен сказать, что здесь полностью будут показаны только базовые стили, а второстепенные (как псевдоэлементы или внутренние элементы контента) - только правила без деклараций, зато с комментами. Это потому что стили всех этих уголочков и стрелочек написаны на псевдоэлементах и представляют собой кучу кода.

Прошу принять к сведению:

Если вы хотите использовать именно ЦСС, то вам следует оптимизировать и причесать код, ведь этот автоматически сгенерированный с препроцессора лесс. А вообще я советую вам использовать препроцессор, он позволит работать с переменными для цветовых схем и размеров таймлайна.


/* ==============================
   $Timeline general styles
   ==============================*/
.timeline {
  position: relative;
  max-width: 1200px;/* timeline width, feel free to set desired width in px or percents */
  margin: 0 auto;
  padding: 0 10px;
  overflow: hidden;
  text-align: center;
  clear: both;
}		
	.timeline:before {}	/*dotted line across all timeline from top to bottom*/
	.timeline_milestone {
	  position: relative;
	  width: 70%;
	  min-height: 100px;
	  margin: 0 auto 100px;
	  padding: 10px;
	  background-color: #7f8c8d;
	}			
		.timeline_milestone:after {} /*bottom arrow of milestone block*/			
		.milestone_title {} /*some properties of milestone title*/			
		.milestone_meta {} /*some properties of milestone annotation*/		
		
	.timeline_post { /*timeline row, that contain date label and post*/
	  display: block;
	  position: relative;
	  width: 100%;
	  margin: 40px 0;
	  clear: both;
	}		
		.timeline_post:before,
		.timeline_post:after {} /*clearfix to prevent collapsing parents of floated elements*/		 			
		.timeline_post:before {} /*center positioned bullet in each row*/		
		
		.tl-post_date { /*label-arrow with date*/
		  position: relative;
		  width: 35%;
		  min-height: 100px;
		  margin-top: 25px;
		  padding: 15px 0;
		  background-color: #e74c3c;
		  font-size: 50px;
		  color: #ecf0f1;
		}				
		.tl-post_card { /*card with main content*/
		  position: relative;
		  width: 42%;
		  min-height: 200px;
		  border-top: 10px solid #7f8c8d;
		  border-bottom: 10px solid #7f8c8d;
		  background-color: #ffffff;
		  text-align: left;
		}
			.tl-post_header { /*header with title and annotation*/
			  position: relative;
			  min-height: 125px;
			  padding-bottom: 10px;
			  border-bottom: 1px dashed #7f8c8d;
			  background-color: #ffffff;
			}			
				.tl-post_title {} /*some  properties of post title*/				
				.tl-post_meta {} /*some properties of post annotation*/	
				
			.tl-post_content {
			  position: relative;
			  background-color: #ffffff;
			  text-align: center;
			}
				.tl-post_content:after {	} /*clearfix to prevent collapsing content block*/
				.content_wrap {
				  min-height: 100px;
				  max-height: 300px;
				  padding: 0 10px;
				  overflow-y: auto;
				}
					.tl-post_text {} /*some properties of post paragraph*/
					
					.tl-post_image { /*ordinary full-width image*/
					  display: inline-block;
					  max-width: 90%;
					}
					.tl-post_image.left { /*floated left image*/
					  float: left;
					  max-width: 40%;
					  margin-right: 10px;
					}
					.tl-post_image.right { /*floated right image*/
					  float: right;
					  max-width: 40%;
					  margin-left: 10px;
					}
			.tl-post_footer { /*footer with tags and readmore-link*/
			  position: relative;
			  min-height: 50px;
			  padding-bottom: 10px;
			  background-color: #ffffff;
			  font-family: "Roboto", sans-serif;
			}
				.tl-post_tags {} /*some properties of post tags*/
					.tl-post_tags span {}
						.tl-post_tags span:not(:last-of-type):after { /*commas between tags*/
						  content: ",";
						}
				.tl-post_readmore {} /*readmore link properties*/		
					
Базовые стили таймлайна

Однако это еще не конец .. Настоящая магия таймлайна начинается с псевдо-элементов и пседо-классов, которые в нечетных (2n-1) записях заставляют посты "плавать" слева, а дату - обтекать справа. И наоборот в парных записях контент "плавает" справа, а ярлычок с датой обтекает слева. Также все это также позволяет нам создать все те интересные уголки и стрелочки без применения картинок.
Эти стили представляют собой кучу кода, поэтому я спрятал их под спойлер и позволил показать вам этих занятных котяток ;)

Ок, давай уже посмотрим на тот код!

Это какой-то ад из псевдо-элементов и псевдо-классов ( а также #боль от специфических селекторов) ... В lesscss выглядит лучше


/* ==============================
   $Timeline (2n-1) styles
   ==============================*/
.timeline_post:nth-of-type(2n-1):hover .tl-post_date {}/*animation options for odd post's labels on hover*/
.timeline_post:nth-of-type(2n-1) .tl-post_date { /*right floated label in odd posts*/
  float: right;
  margin-right: 15%;
}
	.timeline_post:nth-of-type(2n-1) .tl-post_date:before {} /*arrow-triangle corner for label*/
.timeline_post:nth-of-type(2n-1) .tl-post_card { /*left floated post content in odd posts*/
  float: left;
  margin-right: 5%;
  border-left: 10px solid #7f8c8d;
}
	.timeline_post:nth-of-type(2n-1) .tl-post_card:before {} /*header dark angle-border*/
	.timeline_post:nth-of-type(2n-1) .tl-post_card:after {} /*header dark angle-border*/
	
	.timeline_post:nth-of-type(2n-1) .tl-post_header {} /*header positioning options*/
		.timeline_post:nth-of-type(2n-1) .tl-post_header:before {} /*header light angle-border*/
		.timeline_post:nth-of-type(2n-1) .tl-post_header:after {} /*header light angle-border*/
		
	.timeline_post:nth-of-type(2n-1) .tl-post_content {} /*content positioning options*/
		.timeline_post:nth-of-type(2n-1) .tl-post_content:before {} /*content border*/

	.timeline_post:nth-of-type(2n-1) .tl-post_footer {} /*footer positioning options*/
		.timeline_post:nth-of-type(2n-1) .tl-post_footer:before {} /*footer border*/

/* ==============================
   $Timeline (2n) styles
   ==============================*/
.timeline_post:nth-of-type(2n):hover .tl-post_date {} /*animation options for even post's labels on hover*/
.timeline_post:nth-of-type(2n) .tl-post_date { /*left floated label in even posts*/
  float: left;
  margin-left: 15%;
}
	.timeline_post:nth-of-type(2n) .tl-post_date:before {} /*arrow-triangle corner for label*/
.timeline_post:nth-of-type(2n) .tl-post_card { /*right floated post content in even posts*/
  float: right;
  margin-left: 5%;
  border-right: 10px solid #7f8c8d;
}
	.timeline_post:nth-of-type(2n) .tl-post_card:before {} /*header dark angle-border*/
	.timeline_post:nth-of-type(2n) .tl-post_card:after {} /*header dark angle-border*/
	
	.timeline_post:nth-of-type(2n) .tl-post_header {} /*header positioning options*/
		.timeline_post:nth-of-type(2n) .tl-post_header:before {} /*header light angle-border*/
		.timeline_post:nth-of-type(2n) .tl-post_header:after {} /*header light angle-border*/
		
	.timeline_post:nth-of-type(2n) .tl-post_content {} /*content positioning options*/
		.timeline_post:nth-of-type(2n) .tl-post_content:before {} /*content border*/
		
	.timeline_post:nth-of-type(2n) .tl-post_footer {} /*footer positioning options*/
		.timeline_post:nth-of-type(2n) .tl-post_footer:before {} /*footer border*/							
								
Псевдоэлементы таймлайна

Все те декоративные рамочки и уголки можно посмотреть в файлах исходного кода

Кучка котят круче кучи кода
Кучка милых котят, ми-ми-ми

Хорошо, теперь давайте сделаем таймлайн более адаптивным

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

Макет для @media (max-width:800px)

responsive 800px view

Макет для @media (max-width:640px)

responsive 800px view

А теперь пару слов о чрезмерно специфических селекторах. В этом эксперименте с таймлайном в дизайне была задумана разная направленность элементов в четных и нечетных записях и реализовывалось это псевдо-классами. Этот выбор привел к специфичности отдельных селекторов и при разработке адаптивности каждый раз необходимо было применять своего рода ресет (сбрасывать предыдущие стили элементов). Это своего рода плата за использование специфических селекторов в связке с необходимым адаптивным дизайном

Напоследок немного яваскрипт кода:

Правду говоря, этот таймлайн, за исключением ленивой подгрузки картинок реализован на чистом ЦСС. Но в реале таймлайны должны иметь ленивую загрузку контента, в данном случае изображений.
Я применил вот такой jquery lazy-load plugin. Заметьте, что в таком случае придется делать носкрипт фолбэк. Вот разметка:

					
<img class="tl-post_image js-lazy" data-src="octocat.jpg" src="placeholder.jpg" alt="github octocat">
<noscript><img class="tl-post_image" src="octocat.jpg" alt="github octocat"></noscript>
						
Плагин ленивой загрузки картинок

И настройки jQuery плагина


$("img.js-lazy").lazyload({ effect : "fadeIn", threshold : 200 });							
						
Использование ленивой загрузки

И еще одно..

Я советую вам воспользоваться этим плагином для плавного скроллинга между якорями и тем самым улучшить навигацию между частями таймлайна

					
<a class="nav_link js-scroll" href="#milestone">Some milestone</a>
						
Разметка для плавного скроллинга к якорю

$(function() {
  $('a.js-scroll').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});												
						
Плагин плавной прокрутки к якорю

Все готово!

Совместимые браузеры: IE9+, Firefox, Chrome, Opera, Safari, Yandex.browser
Исходный код можно скачать здесь или форкнуть на гитхабе

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

Спасибо за просмотр!