Créer une chronologie interactive avec CSS et JavaScript

Table des matières

Points essentiels à retenir

La création d’une chronologie dynamique est réalisable grâce à l’utilisation combinée de CSS et de JavaScript.
Commencez par élaborer la structure HTML de la chronologie, puis stylisez les éléments à l’aide de CSS.
Pour finir, animez la chronologie avec JavaScript, en utilisant par exemple l’API Intersection Observer pour un effet de fondu progressif lors du défilement.

Les chronologies sont des outils visuels puissants qui facilitent la compréhension d’une séquence d’événements. Découvrez comment concevoir une chronologie interactive en tirant parti du duo CSS et JavaScript.

Mise en place de la structure de la chronologie

Pour commencer, définissez la structure HTML dans le fichier index.html. Organisez les événements et les dates comme des composants distincts afin d’établir les fondations de votre chronologie interactive.

 
 <body>

  <section class="timeline-section">

    <div class="container">

      <div class="Timeline__header">

        <h2>Chronologie</h2>
        <p class="heading--title">

          Voici la répartition du temps prévu

          pour l'événement à venir.

        </p>

      </div>

      <div class="Timeline__content">

        <div class="Timeline__item">

          <div class="Timeline__text">

            <h3>Étape 1</h3>

            <p>

              Lorem ipsum dolor sit amet, consectetur adipiscing elit.

              Accusantium, impedit.

            </p>

            <span class="circle">1</span>

          </div>

          <h3 class="Timeline__date">12 Déc. 2023</h3>

        </div>

        <div class="Timeline__item">

          <div class="Timeline__text">

            <h3>Étape 2</h3>

            <p>

              Lorem ipsum dolor sit amet, consectetur adipiscing elit.

              Accusantium, impedit.

            </p>

            <span class="circle">2</span>

          </div>

          <h3 class="Timeline__date">12 Déc. 2023</h3>

        </div>

      </div>

    </div>

  </section>

</body>

Votre structure de base ressemble actuellement à ceci :

Choisir l’orientation de la chronologie : verticale ou horizontale

Lors de la conception d’une chronologie interactive, vous pouvez opter pour un affichage vertical ou horizontal. Les chronologies verticales sont intuitives, surtout sur les appareils mobiles, car elles suivent le sens naturel du défilement. Elles sont généralement plus appropriées pour les chronologies avec une grande quantité de contenu.

Les chronologies horizontales sont visuellement attrayantes sur les écrans larges et sont idéales pour les sites web créatifs avec moins de contenu textuel, réduisant ainsi le besoin de défilement latéral. Chaque type offre des avantages distincts selon le type de site et l’expérience utilisateur souhaitée.

Mise en forme de la chronologie avec CSS

Pour la mise en forme de votre chronologie, vous travaillerez sur trois types d’éléments visuels : les lignes, les points de repère et les marqueurs temporels.

Lignes : une ligne verticale centrale, obtenue grâce au pseudo-élément `Timeline__content::after`, sert de squelette à la chronologie. Elle est stylisée avec une couleur et une épaisseur définies, et est positionnée de manière absolue afin de 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;
}
```

Points de repère : Les cercles, mis en forme à l’aide de la classe `circle`, servent de points de repère sur la chronologie. Ils sont positionnés de façon absolue au centre de chaque élément et sont mis en valeur par une couleur de fond, créant 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 temporels : Les dates, stylisées avec la classe `Timeline__date`, sont affichées de chaque côté de la chronologie. Leur position alterne entre gauche et droite pour chaque élément afin de créer un aspect visuel équilibré et décalé tout au 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;}

Pour voir l’ensemble des styles, consultez le Dépôt GitHub dans le fichier style.css.

Une fois la mise en forme appliquée, votre composant devrait ressembler à ceci :

Animer avec JavaScript

Pour dynamiser votre chronologie, utilisez l’API Intersection Observer afin d’animer les éléments au fur et à mesure du défilement. Ajoutez le code suivant dans votre fichier script.js.

1. Configuration initiale

Commencez par sélectionner tous les éléments ayant 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 à 0 (invisible) et appliquez une transition CSS pour un effet de fondu en douceur.

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

Bien qu’il soit possible de définir ces styles dans la feuille de style CSS, cela pourrait être risqué. Si JavaScript ne parvient pas à s’exécuter, la chronologie serait invisible. Isoler ce comportement dans le fichier JavaScript illustre bien le concept d’amélioration progressive.

3. Fonction de rappel de l’observateur d’intersection

Définissez une fonction `fadeInOnScroll` qui changera l’opacité des éléments à 1 (visible) quand ils apparaissent à l’écran.

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

4. Options de l’observateur d’intersection

Configurez les options de l’observateur, avec un seuil de 0.1, ce qui signifie que l’animation se déclenche quand 10% d’un élément devient visible.

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

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

Pour finir, créez un `IntersectionObserver` en utilisant les options définies et appliquez-le à chaque élément de la chronologie.

const observer = new IntersectionObserver(fadeInOnScroll, options);

timelineItems.forEach((item) => {
  observer.observe(item);
});

Le résultat final devrait être similaire à ceci :

Meilleures pratiques pour les composants de chronologie

Voici quelques conseils à suivre :

Optimisez votre chronologie pour différentes tailles d’écran. Adoptez des techniques de conception réactive pour garantir une expérience utilisateur fluide quel que soit l’appareil utilisé.
Privilégiez un code performant pour garantir des animations fluides.
Utilisez un HTML sémantique, un contraste de couleur approprié et des attributs ARIA pour assurer l’accessibilité.

Donner vie à votre chronologie : un parcours dans la conception web

La création d’une chronologie interactive ne se limite pas à présenter des informations ; il s’agit de construire une expérience utilisateur engageante et instructive. En associant la structure HTML, la mise en forme CSS et les animations JavaScript, vous pouvez développer une chronologie qui séduit votre public tout en leur fournissant des informations précieuses.

0 Partages