Lorsqu'il a fallu que j’intègre une frise chronologique sur un de mes sites internet, je me suis d'abord mis à la recherche d'une solution déjà existante. Il en existe énormément. L'article Timelines CSS – 7 astuces, par exemple, recense des timelines réalisées uniquement en html et css.

Malheureusement, soit la timeline ne correspondait pas à ce que j'avais besoin (pas de règle de temps graduées, pas de détail visible pour l’événement...), ou soit elle était vraiment trop compliquée.

J'ai donc prix mon courage à deux mains et j'en ai codé une en me basant sur celle de @csswizardry qui me plaisait graphiquement, mais ou il manquait une graduation à l’échelle du temps.

Timelien css

Vous pouvez visualiser la démo sur cette page :

Le script ainsi que les explications d’installation sont téléchargeables sur Github. Toutes les contributions à l'amélioration du script sont le bienvenue.

Télécharger b1njTimeline

De nombreuses amélioration pourrait être apportées, comme notamment :

  • Une gestion automatique de la hauteur de la frise
  • La gestion des dates antérieur à Jésus Christ
  • Une visualisation horizontale...