Crearea unei cronologie interactive cu CSS și JavaScript

de
Tweet
Share
Share
Pin

Recomandări cheie

  • O cronologie puternică este ușor de construit folosind CSS și JavaScript.
  • Începeți prin a sublinia structura HTML a cronologiei și a stiliza elementele cronologiei cu CSS.
  • Continuați să adăugați animație la cronologie folosind JavaScript. Puteți folosi API-ul Intersection Observer pentru a estompa elementele cronologiei de pe defilare.

Cronologie sunt instrumente vizuale puternice care ajută utilizatorii să navigheze și să înțeleagă evenimentele cronologice. Explorați cum să creați o cronologie interactivă folosind duo-ul dinamic CSS și JavaScript.

Construirea structurii cronologiei

Pentru început, schițați structura HTML în index.html. Creați evenimente și date ca componente separate, punând bazele cronologiei 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>

În acest moment, componenta dvs. arată astfel:

  6 moduri în care serviciile de streaming muzical au schimbat pozitiv industria muzicală

Alegeți un aspect pentru cronologia dvs.: verticală vs. orizontală

Când proiectați o cronologie interactivă, puteți alege fie un stil vertical, fie orizontal. Cronologia verticală este ușor de utilizat, în special pe telefoane, deoarece aceasta este direcția tipică în care derulează site-urile web. Dacă cronologia dvs. are mult conținut, acesta va fi probabil cel mai convenabil aspect.

Cronologie orizontale, totuși, sunt atrăgătoare pe ecranele late și sunt grozave pentru site-urile creative cu mai puține detalii, care pot minimiza derularea laterală. Fiecare stil are avantajele sale, potrivite pentru diferite tipuri de site-uri web și experiențe ale utilizatorilor.

Stilați cronologia cu CSS

Există trei tipuri de elemente vizuale pe care le vei stila pentru cronologia: linii, noduri și marcatori de dată.

  • Linii: O linie verticală centrală, creată folosind pseudo-elementul Timeline__content::after, servește drept coloană vertebrală a cronologiei. Este stilat cu o lățime și o culoare specifice, poziționat absolut pentru a se alinia cu centrul elementelor cronologiei. 
     .Timeline__content::after {
      background-color: var(--clr-purple);
      content: "";
      position: absolute;
      left: calc(50% - 2px);
      width: 0.4rem;
      height: 97%;
      z-index: -5;
    }
  • Noduri: cercurile, stilate folosind clasa cerc, acționează ca noduri pe linia temporală. Acestea sunt poziționate absolut în centrul fiecărui element cronologic și sunt distincte vizual cu o culoare de fundal, formând punctele cheie de-a lungul cronologiei. 
     .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;
    }
  • Marcatori de dată: datele, stilate folosind clasa Timeline__date, sunt afișate de ambele părți ale cronologiei. Poziționarea lor alternează între stânga și dreapta pentru fiecare element cronologic, creând un aspect eșalonat și echilibrat de-a lungul cronologiei. 
     .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;}

Consultați setul complet de stiluri de la Repoziție GitHub în style.css.

  Cum îmi schimb contul Xbox One de la copil la părinte

După coafare, componenta dvs. ar trebui să arate astfel:

Animarea cu JavaScript

Pentru a anima această componentă, utilizați API-ul Intersection Observer pentru a anima elementele cronologiei pe defilare. Adăugați următorul cod la script.js.

1. Configurare inițială

Mai întâi, selectați toate elementele cu clasa Timeline__item.

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

2. Stilul inițial al elementelor cronologice

Setați opacitatea inițială a fiecărui element la 0 (invizibil) și aplicați o tranziție CSS pentru estompare lină.

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

Puteți seta aceste stiluri în foaia de stil, dar ar fi periculos să faceți acest lucru. Dacă JavaScript nu reușește să ruleze, această abordare ar lăsa cronologia ta invizibilă! Izolarea acestui comportament în fișierul JavaScript este un bun exemplu de îmbunătățire progresivă.

3. Intersection Observer Callback

Definiți o funcție fadeInOnScroll pentru a modifica opacitatea elementelor la 1 (vizibil) atunci când acestea se intersectează cu fereastra.

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

4. Opțiuni Observator de intersecție

Setați opțiunile pentru observator, cu un prag de 0,1 care indică faptul că animația se declanșează atunci când 10% dintr-un element este vizibil.

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

5. Crearea și utilizarea Observatorului de intersecție

Terminați prin crearea unui IntersectionObserver cu aceste opțiuni și aplicarea acestuia fiecărui element cronologic.

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

Rezultatul final ar trebui să arate astfel:

Cele mai bune practici ale componentei cronologie

Unele practici pe care trebuie să le respectați includ:

  • Optimizați-vă cronologia pentru diferite dimensiuni de ecran. Învățați tehnici de design responsive pentru a asigura o experiență perfectă pentru utilizator pe toate dispozitivele.
  • Utilizați practici eficiente de codare pentru a asigura animații fluide.
  • Utilizați HTML semantic, rapoarte de contrast adecvate și etichete ARIA pentru o mai bună accesibilitate.
  Cum să utilizați emoticoanele secrete Microsoft Teams

Aduceți-vă cronologia la viață: o călătorie în design web

Construirea unei cronologie interactive nu înseamnă doar prezentarea de informații; este vorba despre crearea unei experiențe captivante și informative. Combinând structura HTML, stilul CSS și animațiile JavaScript, puteți crea o cronologie care captivează publicul, oferind în același timp conținut valoros.