← Article précédent Article suivant →
Publié le 07 novembre 2016

Certains d'entre vous m'ont demandé de réaliser un tutoriel sur la création d'une timeline, c'est donc le sujet que nous allons aborder aujourd'hui.

Introduction


Une timeline peut être un bon moyen de représenter des entités dans un ordre chronologique, comme pour des articles, des états qui tendent à évoluer, etc.
C'est d'ailleurs ce que j'ai adopté sur l'accueil de mon site, toutefois il faudrait que je change un peu les dispositions à l'avenir car il commence à avoir pas mal d'articles, mais ça c'est une autre histoire. :)

Je nommerais "wrapper" les éléments qui englobent des éléments.

La structure


Pour notre cas, nous allons apparenter notre timeline à un flux d'articles.
<!-- Wrapper général -->
<div class="timeline">
	<!-- Wrapper d'un article -->
	<section class="timeline-item">
		<!-- Elément cliquable -->
		<a href="#" class="timeline-item-details">
			<!-- Date -->
			<!-- Nous renseignons l'attribut "datetime" pour avoir un format universel. -->
			<time datetime="2016-11-07" class="timeline-item-details-date">07 nove 2016</time>
			<!-- Marqueur -->
			<div class="timeline-item-details-marker"></div>
			<!-- Contenu -->
			<div class="timeline-item-details-description">
				<h2>Ceci est un titre</h2>
				<p>Contenu</p>
			</div>
		</a>
	</section>
</div>

Le style


Wrapper global


Nous commencons par notre wrapper global. Dans le cas où nous avons très peu d'article(s), notre ligne verticale descendra trop bas, nous allons donc couper cette ligne pour ne pas que ça déborde de trop. Nous renseignons alors une hauteur minimum et nous cachons ce qui dépasse sur l'axe verticale :
.timeline {
    position: relative;
    min-height: 811px;
    overflow-y: hidden;
}

Entité (article)


A l'aide du pseudo-élément ":before", nous allons créer cette fameuse ligne principale, qui est l'élément phare de notre timeline :
.timeline-item:before {
    content: '';
    position: absolute;
    background-color: #FFF;
    width: 3px;
    height: 100%;
    left: 288px;
}
.timeline-item {
    margin: 0 74px;
}

Wrapper de nos détails


Cet élément a pour but d'espacer nos entités (articles) et est l'élément cliquable, par conséquent ses enfants seront eux aussi cliquable.
.timeline-item-details {
    display: inline-block;
    margin-bottom: 64px;
}
.timeline-item:first-child .timeline-item-details {
    margin-top: 64px;
}

Les détails


Ici les détails sont :
  • La date
  • Le marqueur
  • Le contenu
Nous appliquons une transition à notre marqueur ainsi qu'à notre description (contenu) en prenant soin de bien renseigner quelle(s) propriété(s) bénéficieront de la transition de façon à ne pas la surcharger.
.timeline-item-details-date, .timeline-item-details-marker, .timeline-item-details-description {
    float: left;
}

.timeline-item-details-date {
    color: #FFF;
    font-size: 1.3em;
}

.timeline-item-details-marker {
    position: relative;
    z-index: 10;
    border-radius: 50%;
    background-color: #3F51B5;
    width: 32px;
    height: 32px;
    border: 3px solid #FFF;
    margin-left: 74px;
    transition: transform .3s, background-color .3s;
}
.timeline-item-details:hover .timeline-item-details-marker {
    transform: scale(1.4);
    background-color: #FFF;
}

.timeline-item-details-description:before {
    content: '';
    position: absolute;
    background-color: #FFF;
    width: 74px;
    height: 3px;
    margin-left: -90px;
    margin-top: 18px;
}
.timeline-item-details-description {
    padding: 16px;
    color: #333;
    background-color: #FFF;
    width: 700px;
    border-radius: 4px;
    margin-left: 74px;
    margin-top: -20px;
    word-wrap: break-word;
    opacity: .9;
    transition: opacity .3s;
}
.timeline-item-details:hover .timeline-item-details-description {
    opacity: 1;
}

.timeline-item-details-description h2 {
    font-size: 2.5em;
    margin-bottom: 16px;
}

.timeline-item-details-description p {
    line-height: 23px;
}

Voir la vidéo


Retrouvez-moi sur les réseaux sociaux