Меню

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

Привіт, в цьому експерименті ми створимо адаптивний вертикальний таймлайн в стилі плаского (флет) дизайну на 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
Вихідний код можете скачати тут тут або форкнути на гітхабі

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

Дякую за перегляд!