Templates gratuits de frise chronologique ou timeline

Présentation

- Pour présenter des évènements dans l'ordre chronologique quoi de mieux qu'un template de frise ou timeline en anglais
- Je commence à rassembler, ici, ce que je trouve de mieux sur le web

Je vous propose 26 solutions au

 

Frise chronologique - Timeline

Afan Nicko

Caractéristiques

  • CSS, jQuery, Bootstrap (CSS+JS)
  • Desktop: Horizontale, les évènements sont de part et d'autre de la ligne du temps
  • Mobile: Verticale, les évènements sont tous du côté droit de la ligne du temps
  • J'aime beaucoup !
  • Philippines

Image cliquable pour voir l'exemple

frise chronologique horizontale devenant verticale en mode mobile

Références

Site web

[Créé / modifié] [01-03-2022 / 01-03-2022]

Barker Paul

Caractéristiques

  • CSS pur
  • Desktop: Les évènements sont de part et d'autre de la ligne du temps. Ils se chevauchent horizontalement
  • Mobile: Les évènements sont tous les uns en dessous des autres
  • Vineyard, Utah, USA

Image cliquable pour voir l'exemple

frise chronologique verticale

Références

Site web

[Créé / modifié] [14-05-2022 / 14-05-2022]

Biek David

Caractéristiques

  • CSS, JS, jQuery, Slick (CSS+JS), Bootstrap 5.0.0 (CSS+JS)
  • Mode slider
  • Desktop: 3 colonnes
  • Mobile: 1 colonne
  • Vous pouvez faire glisser les diapositives avec la souris ou le doigt

Image cliquable pour voir l'exemple

frise chronologique horizontale en mode slider

Références

Site web

[Créé / modifié] [01-05-2022 / 01-05-2022]

Boots Mark

Caractéristiques

  • CSS pur
  • Desktop: Les évènements sont de part et d'autre de la ligne du temps
  • Mobile: Les évènements sont tous du côté droit de la ligne du temps
  • Les limites entre deux sections sont très marquées

Image cliquable pour voir l'exemple

frise chronologique verticale avec une presentation desktop et une presentation mobile

Références

Site web

[Créé / modifié] [09-03-2022 / 09-03-2022]

Chilcote Lauren

Caractéristiques

  • CSS pur
  • Desktop, mobile: La ligne du temps est une fonction sinus
  • Timeline très simple
  • Ventura, Californie, USA

Image cliquable pour voir l'exemple

frise chronologique avec sinusoide

Références

Site web

Site de l'auteur

[Créé / modifié] [27-07-2022 / 27-07-2022]

Coding Népal

Caractéristiques

  • CSS pur
  • Desktop: Les évènements sont de part et d'autre de la ligne du temps
  • Tablette: Les évènements sont tous du côté droit de la ligne du temps; Les icônes subsistent
  • Mobile: La ligne du temps et les icônes disparaîssent
  • Timeline très lisible dans les trois modes
  • Extra !
  • Surkhet, Népal

Image cliquable pour voir l'exemple

frise chronologique avec icones, renvois et evenements de part et d'autre

Références

Site web

Site de l'auteur

[Créé / modifié] [01-03-2022 / 01-03-2022]

Cody House

- Fonctionne parfaitement en onglet mais pas en pop up

Caractéristiques

  • CSS, JS, Modernizr.js, jQuery
  • Desktop: Les évènements sont de part et d'autre de la ligne du temps, la date d'un côté, le texte de l'autre
  • Mobile: La date rentre dans la boîte et toute se retrouve à droite de la ligne du temps
  • jQuery essentiellement pour la transition d'affichage des éléments
  • Présentation bien structurée
  • Naples, Italie

Image cliquable pour voir l'exemple

frise chronologique responsive avec transition d'affichage

Références

Site web

Site de l'auteur

[Créé / modifié] [09-04-2022 / 09-04-2022]

Erpik Samet

Caractéristiques

  • CSS pur
  • Desktop: Les évènements sont à droite de la ligne du temps, la date à gauche
  • Mobile: La date passe de gauche à droite pour se retrouver sous le titre de l'évènement ce qui dégae un bel espace pour le texte
  • Brighton, Angleterre

Image cliquable pour voir l'exemple

frise chronologique responsive

Références

Site web

Site de l'auteur

[Créé / modifié] [01-03-2022 / 01-03-2022]

Fagoe Kewish

Caractéristiques

  • CSS pur
  • Desktop, mobile: Les évènements sont à droite de la ligne du temps
  • Présentation plutôt agréable, surtout sur mobile

Image cliquable pour voir l'exemple

frise chronologique responsive avec image

Références

Site web

[Créé / modifié] [09-03-2022 / 09-03-2022]

Html Codex

Caractéristiques

  • CSS, Bootstrap.css
  • Desktop: Les évènements sont de part et d'autre de la ligne du temps: La date d'un côté, le texte de l'autre
  • Mobile: Les évènements sont tous du côté droit de la ligne du temps avec la date au dessus du texte
  • Très élégante proposition

Image cliquable pour voir l'exemple

frise chronologique responsive par html codex

Références

Site web

Site de l'auteur

[Créé / modifié] [09-04-2022 / 09-04-2022]

Jacobs Sam

Caractéristiques

  • CSS pur
  • Divisée en périodes et en évènements à l'intérieur de la période
  • Desktop: Les évènements sont de part et d'autre de la ligne du temps
  • Mobile: Les évènements sont tous du côté droit de la ligne du temps
  • Southsea, Portsmouth, Angleterre

Image cliquable pour voir l'exemple

frise chronologique divisee en periodes

Références

Site web

Site de l'auteur

[Créé / modifié] [01-03-2022 / 01-03-2022]

Janssen Mathies

Caractéristiques

  • CSS, JS
  • Desktop, mobile, même présentation: L'année se positionne en fixe en haut de l'écran jusqu'à être délicatement poussée vers la sortie par l'année nouvelle
  • Bien jolie proposition
  • Hambourg, Allemagne

Image cliquable pour voir l'exemple

frise chronologique avec en-tete fixe

Références

Site web

[Créé / modifié] [13-05-2022 / 13-05-2022]

Joseph Jones

Caractéristiques

  • CSS pur
  • Desktop: Les évènements, pour une date donnée, sont alignés horizontement, à droite de la ligne du temps
  • Mobile: Les évènements deviennent alignés verticalement, toujours à droite de la ligne du temps
  • Chennai, Inde

Image cliquable pour voir l'exemple

frise chronologique avec plusieurs evenement a une date donnee

Références

Site web

Site de l'auteur

[Créé / modifié] [01-05-2022 / 01-05-2022]

Kio Hyu

Caractéristiques

  • CSS, Animate.css, JS, Wow.js
  • Avec animation
  • Desktop, mobile: Les évènements sont de part et d'autre de la ligne du temps et appraîssent en fondu
  • Timeline agréable sur desktop
  • Vietnam

Image cliquable pour voir l'exemple

frise chronologique avec animation des evenements

Références

Site web

[Créé / modifié] [01-03-2022 / 01-03-2022]

LarsonClay

Caractéristiques

  • CSS, Normalize.css
  • Quand on clique sur un noeud une légende s'affiche en dessous
  • Desktop: La ligne du temps est horizontale
  • Mobile: Les noeuds se transforment en cercles
  • Super !

Image cliquable pour voir l'exemple

timeline gratuite sur une ligne horizontale

Références

Site web

[Créé / modifié] [13-06-2022 / 13-06-2022]

MdBootstrap - MDB5

- L'original !

Caractéristiques

  • CSS, Bootstrap.css 5.1.3
  • Version gratuite 4.0
  • La timeline simple
  • Les évènements sont tous du côté droit de la ligne du temps

Image cliquable pour voir l'exemple

timeline gratuite avec MDB5

Références

Site web

[Créé / modifié] [13-06-2022 / 13-06-2022]

MdBootstrap (2) - MDB5

- 3 autres propositions sur le site (en plus des 2 présentées)

Caractéristiques

  • CSS, Bootstrap.css 5.1.3
  • Version gratuite 4.0
  • La timeline verticale avec blocs dont le fond est dégradé
  • Desktop: Les évènements sont de part et d'autre de la ligne du temps
  • Mobile: Les évènements sont tous du côté droit de la ligne du temps

Image cliquable pour voir l'exemple

timeline gratuite avec fond degrade

Références

Site web

[Créé / modifié] [13-06-2022 / 13-06-2022]

Narvaez Jimmy

Caractéristiques

  • CSS pur
  • Desktop: Les évènements sont de part et d'autre de la ligne du temps
  • Mobile: Les évènements sont tous du côté droit de la ligne du temps
  • Présentation très claire
  • Equateur

Image cliquable pour voir l'exemple

frise chronologique responsive parfaite

Références

Site web

[Créé / modifié] [09-03-2022 / 09-03-2022]

Okba Design

Caractéristiques

  • CSS pur
  • Desktop: Les évènements sont de part et d'autre de la ligne du temps
  • Mobile: Les évènements sont tous du côté droit de la ligne du temps
  • Un petit "margin-bottom:10px;" dans la classe ".time" pour décoller le texte
  • Ukraine

Image cliquable pour voir l'exemple

frise chronologique full responsive

Références

Site web

[Créé / modifié] [27-07-2022 / 27-07-2022]

Omar Mustafa

Caractéristiques

  • CSS, Bootstrap.css
  • Desktop: Les évènements sont de part et d'autre de la ligne du temps
  • Mobile: Les évènements sont tous du côté droit de la ligne du temps
  • Timeline très fine et agréable à regarder avec un judicieux dégradé en haut et en bas
  • Égypte

Image cliquable pour voir l'exemple

frise chronologique avec degrade en haut et en bas

Références

Site web

[Créé / modifié] [01-03-2022 / 01-03-2022]

Sharma Sanchit

Caractéristiques

  • CSS pur
  • Desktop: Les évènements sont de part et d'autre de la ligne du temps avec la date en opposition
  • Mobile: Les évènements sont tous du côté droit de la ligne du temps
  • Gurugram, Haryana, Inde

Image cliquable pour voir l'exemple

frise chronologique responsive avec date en opposition

Références

Site web

[Créé / modifié] [09-03-2022 / 09-03-2022]

Sayegh Joseph

Caractéristiques

  • CSS pur
  • Desktop: Les évènements sont de part et d'autre de la ligne du temps
  • Mobile: Les évènements sont tous du côté droit de la ligne du temps; Le cercle rouge central disparaît
  • Timeline très fine et agréable à regarder
  • Londres, Angleterre

Image cliquable pour voir l'exemple

frise chronologique avec cercle central et evenements de part et d'autre

Références

Site web

[Créé / modifié] [01-03-2022 / 01-03-2022]

Toledo Gabriel

Caractéristiques

  • CSS, Bootstrap.css
  • Desktop: Les évènements sont de part et d'autre de la ligne du temps avec les icônes qui la matérialisent
  • Mobile: Les évènements sont tous à cheval sur la ligne du temps avec l'icône en haut de l'évènement
  • On devrait pouvoir se passer facilement de Bootstrap
  • Portugal

Image cliquable pour voir l'exemple

frise chronologique reponsive avec bootstrap

Références

Site web

[Créé / modifié] [09-04-2022 / 09-04-2022]

Tudoran Stefan

- Nécessite absolument : 'stopExecutionOnTimeout - 1b93190375 e9ccc259df3a57 c1abc0e64599724ae30d7 ea4c6877 eb615f89387.js'

Caractéristiques

  • CSS, Normalize.css, JS, jQuery
  • Desktop: Les évènements sont de part et d'autre de la ligne du temps avec la date en opposition
  • Mobile: Les évènements sont tous à cheval sur la ligne du temps et la date en haut de l'évènement
  • Les zones de texte s'affichent au fur et à mesure du scoll avec une transition d'affichage
  • Bucarest, Roumanie

Image cliquable pour voir l'exemple

frise chronologique verticale avec transition d'affichage

Références

Site web

[Créé / modifié] [01-03-2022 / 01-03-2022]

UnExcelLedx

Caractéristiques

  • CSS pur
  • Desktop: Les évènements sont de part et d'autre de la ligne du temps
  • Mobile: Les évènements sont tous du côté droit de la ligne du temps
  • Les images apportent beaucoup de fraîcheur dans ce timeline

Image cliquable pour voir l'exemple

frise chronologique avec images en icones

Références

Site web

[Créé / modifié] [01-03-2022 / 01-03-2022]

Wei Shinn Chong

Caractéristiques

  • CSS, JS, jQuery
  • Desktop: Les évènements sont de part et d'autre de la ligne du temps avec un affichage glissant et en fondu
  • Mobile: Les évènements sont tous du côté droit de la ligne du temps
  • Le défilement rend nette les sections qui sont entrain de s'afficher
  • Timeline très artistique
  • Singapour

Image cliquable pour voir l'exemple

frise chronologique avec animations a l'affichage

Références

Site web

[Créé / modifié] [01-03-2022 / 01-03-2022]