Démo en direct · filtrez, puis scrollez
Six pays, dont la Belgique, mettent en commun leur charbon et leur acier. La première pierre de la construction européenne.
Naissance de la Communauté économique européenne et d'Euratom. Le marché commun est lancé.
Pour la première fois, les citoyens élisent directement leurs députés au Parlement européen.
Cinq pays, dont la Belgique, s'engagent à supprimer progressivement les contrôles à leurs frontières communes.
La Communauté devient l'Union européenne. La route vers la monnaie unique est tracée.
Les pièces et les billets en euros remplacent le franc belge et onze autres monnaies nationales.
Le plus grand élargissement de l'histoire de l'Union, vers l'Europe centrale et la Méditerranée.
Le Conseil européen obtient un président permanent. Le premier à occuper le poste est le Belge Herman Van Rompuy.
Pour la première fois, un État membre sort de l'Union européenne.
Aucun événement pour ce filtre.
/00 · Brief
Raconter une histoire dans l'ordre : une crise, une carrière, un procès, la construction européenne. Chaque événement a sa date, sa catégorie, un titre, un texte et, si on veut, une photo. Le lecteur filtre par catégorie et voit le rail se remplir à mesure qu'il descend.
/01 · Intégration
Placez timeline.css et timeline.js dans les dossiers /css et /js du dossier.
Reprenez la <section class="ll-timeline" data-timeline> de la démo.
Un <li> par événement, avec sa catégorie dans data-cat. Les boutons de filtre se créent tout seuls.
/02 · Personnalisation
Couleur, polices, rayons et ombres passent par des variables (--tl-accent, --tl-font-title…).
Un préréglage DH est inclus : data-brand="dh". Les données peuvent aussi venir d'un fichier
JSON avec data-src, pratique quand la frise est longue ou mise à jour souvent.
/03 · Sous le capot
Le rail est un simple trait dont la hauteur suit le scroll, calculée dans une boucle requestAnimationFrame.
Les cartes apparaissent avec IntersectionObserver. Les filtres sont de vrais boutons avec aria-pressed
et le nombre d'événements affichés est annoncé aux lecteurs d'écran. Sur mobile, la frise passe en une colonne ;
avec prefers-reduced-motion, plus aucune animation.
/04 · Dans le zip