Créer une chronologie interactive avec CSS et JavaScript

2023/11/17

Points clés à retenir

Une chronologie puissante est facile à créer à l’aide de CSS et JavaScript.
Commencez par décrire la structure HTML de la chronologie et stylisez les éléments de la chronologie avec CSS.
Continuez à ajouter une animation à la chronologie à l’aide de JavaScript. Vous pouvez utiliser l’API Intersection Observer pour faire apparaître en fondu les éléments de la chronologie lors du défilement.

Les chronologies sont de puissants outils visuels qui aident les utilisateurs à naviguer et à comprendre les événements chronologiques. Découvrez comment créer une chronologie interactive à l’aide du duo dynamique CSS et JavaScript.

Construire la structure de la chronologie

Vous pouvez consulter le code complet de ce projet à partir de son référentiel GitHub .

Pour commencer, décrivez la structure HTML dans index.html . Créez des événements et des dates en tant que composants distincts, jetant ainsi les bases de la chronologie interactive.

<body> <section class="timeline-section"> <div class="container"> <div class="Timeline__header"> <h2>Timeline</h2> <p class="heading--title"> Here is the breakdown of the time we anticipate <br /> using for the upcoming event. </p> </div> <div class="Timeline__content"> <div class="Timeline__item"> <div class="Timeline__text"> <h3>Occasion 1</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, explicabo. </p> <span class="circle">1</span> </div> <h3 class="Timeline__date">12 Dec. 2023</h3> </div> <div class="Timeline__item"> <div class="Timeline__text"> <h3>Occasion 2</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, explicabo. </p> <span class="circle">2</span> </div> <h3 class="Timeline__date">12 Dec. 2023</h3> </div>  </div> </div> </section></body>

Pour le moment, votre composant ressemble à ceci :

Structure HTML du composant de chronologie

Choisissez une mise en page pour votre chronologie : verticale ou horizontale

Lors de la conception d’une chronologie interactive, vous pouvez choisir un style vertical ou horizontal. Les chronologies verticales sont faciles à utiliser, en particulier sur les téléphones, car c’est la direction typique dans laquelle les sites Web défilent. Si votre chronologie contient beaucoup de contenu, ce sera probablement la mise en page la plus pratique.

Les chronologies horizontales, cependant, sont attrayantes sur les écrans larges et conviennent parfaitement aux sites créatifs avec moins de détails, qui peuvent minimiser le défilement latéral. Chaque style a ses avantages, adaptés à différents types de sites Web et d’expériences utilisateur.

Stylisez la chronologie avec CSS

Il existe trois types d’éléments visuels que vous styliserez pour la chronologie : les lignes, les nœuds et les marqueurs de date.

Lignes : Une ligne verticale centrale, créée à l’aide du pseudo-élément Timeline__content::after, sert d’épine dorsale à la timeline. Il est stylé avec une largeur et une couleur spécifiques, positionné de manière absolue pour s’aligner avec le centre des éléments de la chronologie. .Timeline__content::after { background-color: var(--clr-purple); content: ""; position: absolute; left: calc(50% - 2px); width: 0.4rem; height: 97%; z-index: -5;}
Nœuds : les cercles, stylisés à l’aide de la classe circle, agissent comme des nœuds sur la timeline. Ceux-ci sont positionnés de manière absolue au centre de chaque élément de la chronologie et sont visuellement distincts avec une couleur d’arrière-plan, formant les points clés le long de la chronologie. .circle { position: absolute; background: var(--clr-purple); top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 6.8rem; width: 100%; aspect-ratio: 1/ 1; border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 3; font-size: 1.6rem;}
Marqueurs de date : les dates, stylisées à l’aide de la classe Timeline__date, s’affichent de chaque côté de la chronologie. Leur positionnement alterne entre gauche et droite pour chaque élément de la chronologie, créant un aspect décalé et équilibré le long de la chronologie. .Timeline__text,.Timeline__date { width: 50%; }.Timeline__item:nth-child(even) { flex-direction: row-reverse;}.Timeline_item:nth-child(even) .Timeline_date { text-align: right; padding-right: 8.3rem;}.Timeline_item:nth-child(even) .Timeline_text { padding-left: 8.3rem;}.Timeline_item:nth-child(odd) .Timeline_text { text-align: right; align-items: flex-end; padding-right: 8.3rem;}.Timeline_item:nth-child(odd) .Timeline_date { padding-left: 8.3rem;}

Découvrez l’ensemble complet des styles du dépôt GitHub dans style.css .

Après le style, votre composant devrait ressembler à ceci :

Animation avec JavaScript

Pour animer ce composant, utilisez l’API Intersection Observer pour animer les éléments de la chronologie lors du défilement. Ajoutez le code suivant à script.js .

1. Configuration initiale

Tout d’abord, sélectionnez tous les éléments avec la classe Timeline__item.

const timelineItems = document.querySelectorAll(".Timeline__item");

2. Style initial des éléments de la chronologie

Définissez l’opacité initiale de chaque élément sur 0 (invisible) et appliquez une transition CSS pour un fondu en douceur .

timelineItems.forEach((item) => { item.style.opacity = 0; item.style.transition = "opacity 0.6s ease-out";}

Vous pouvez définir ces styles dans la feuille de style, mais cela serait dangereux. Si le JavaScript ne s’exécute pas, cette approche laisserait votre chronologie invisible ! Isoler ce comportement dans le fichier JavaScript est un bon exemple d’ amélioration progressive .

3. Rappel de l’observateur d’intersection

Définissez une fonction fadeInOnScroll pour changer l’opacité des éléments à 1 (visible) lorsqu’ils croisent la fenêtre.

const fadeInOnScroll = (entries, observer) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.style.opacity = 1; } });};

4. Options d’observateur d’intersection

Définissez les options pour l’observateur, avec un seuil de 0,1 indiquant que l’animation se déclenche lorsque 10 % d’un élément est visible.

const options = { root: null, rootMargin: "0px", threshold: 0.1,}

5. Création et utilisation de l’observateur d’intersection

Terminez en créant un IntersectionObserver avec ces options et en l’appliquant à chaque élément de la chronologie.

const observer = new IntersectionObserver(fadeInOnScroll, options);timelineItems.forEach((item) => { observer.observe(item);});

Le résultat final devrait ressembler à ceci :

Meilleures pratiques en matière de composants de chronologie

Certaines pratiques à respecter comprennent :

Optimisez votre chronologie pour différentes tailles d’écran. Apprenez les techniques de conception réactive pour garantir une expérience utilisateur transparente sur tous les appareils.
Utilisez des pratiques de codage efficaces pour garantir des animations fluides.
Utilisez du HTML sémantique , des taux de contraste appropriés et des étiquettes ARIA pour une meilleure accessibilité.

Donner vie à votre chronologie : un voyage dans la conception Web

Construire une chronologie interactive ne consiste pas seulement à présenter des informations ; il s’agit de créer une expérience engageante et informative. En combinant la structure HTML, le style CSS et les animations JavaScript, vous pouvez créer une chronologie qui captive votre public tout en fournissant un contenu de valeur.