Utilizzando i concetti di base di HTML, CSS e JS, avrai una timeline attraente attiva e funzionante in pochissimo tempo.

Punti chiave

  • Una sequenza temporale potente è facile da costruire utilizzando CSS e JavaScript.
  • Inizia delineando la struttura HTML della timeline e definendo gli elementi della timeline con i CSS.
  • Continua ad aggiungere l'animazione alla timeline utilizzando JavaScript. Puoi utilizzare l'API Intersection Observer per sfumare gli elementi della timeline durante lo scorrimento.

Le sequenze temporali sono potenti strumenti visivi che aiutano gli utenti a navigare e comprendere gli eventi cronologici. Scopri come creare una sequenza temporale interattiva utilizzando la coppia dinamica di CSS e JavaScript.

Costruire la struttura della sequenza temporale

Puoi controllare il codice completo per questo progetto dal suo file Repositorio GitHub.

Per iniziare, delinea la struttura HTML in indice.html. Crea eventi e date come componenti separati, gettando le basi per la sequenza temporale interattiva.

instagram viewer 
<body>
<sectionclass="timeline-section">
<divclass="container">
<divclass="Timeline__header">
<h2>Timelineh2>
<pclass="heading--title">
 Here is the breakdown of the time we anticipate <br />
 using for the upcoming event.
p>
div>


<divclass="Timeline__content">
<divclass="Timeline__item">
<divclass="Timeline__text">
<h3>Occasion 1h3>


<p>
 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Corporis, explicabo.
p>


<spanclass="circle">1span>
div>


<h3class="Timeline__date">12 Dec. 2023h3>
div>


<divclass="Timeline__item">
<divclass="Timeline__text">
<h3>Occasion 2h3>


<p>
 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Corporis, explicabo.
p>


<spanclass="circle">2span>
div>


<h3class="Timeline__date">12 Dec. 2023h3>
div>

div>
div>
section>
body>

Al momento, il tuo componente assomiglia a questo:

Scegli un layout per la tua timeline: verticale vs. Orizzontale

Quando progetti una timeline interattiva, puoi scegliere uno stile verticale o orizzontale. Le timeline verticali sono facili da usare, soprattutto sui telefoni, poiché questa è la direzione tipica in cui scorrono i siti web. Se la tua timeline ha molti contenuti, questo sarà probabilmente il layout più conveniente.

Le timeline orizzontali, tuttavia, sono attraenti su schermi ampi e sono ottime per i siti creativi con meno dettagli, che possono ridurre al minimo lo scorrimento laterale. Ogni stile ha i suoi vantaggi, adatti a diversi tipi di siti Web ed esperienze utente.

Modella la timeline con i CSS

Esistono tre tipi di elementi visivi che definirai per la timeline: linee, nodi e indicatori di data.

  • Linee: Una linea verticale centrale, creata utilizzando Timeline__content:: dopo lo pseudo-elemento, funge da spina dorsale della timeline. Ha uno stile con una larghezza e un colore specifici, posizionato assolutamente per allinearsi con il centro degli elementi della timeline.
    .Timeline__content::after {
    background-color: var(--clr-purple);
    content: "";
    position: absolute;
    left: calc(50% - 2px);
    width: 0.4rem;
    height: 97%;
    z-index: -5;
    }
  • Nodi: I cerchi, stilizzati utilizzando la classe circle, agiscono come nodi sulla timeline. Questi sono assolutamente posizionati al centro di ogni elemento della timeline e sono visivamente distinti con un colore di sfondo, formando i punti chiave lungo la timeline.
    .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;
    }
  • Indicatori di data: le date, stilizzate utilizzando la classe Timeline__date, vengono visualizzate su entrambi i lati della sequenza temporale. Il loro posizionamento si alterna tra sinistra e destra per ciascun elemento della sequenza temporale, creando un aspetto sfalsato ed equilibrato lungo la sequenza temporale.
    .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;}

Scopri il set completo di stili da Repository GitHub in style.css.

Dopo lo styling, il tuo componente dovrebbe assomigliare a questo:

Animazione con JavaScript

Per animare questo componente, utilizzare l'API Intersection Observer per animare gli elementi della timeline durante lo scorrimento. Aggiungi il seguente codice a script.js.

1. Configurazione iniziale

Innanzitutto, seleziona tutti gli elementi con la classe Timeline__item.

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

2. Stile iniziale degli elementi della timeline

Imposta l'opacità iniziale di ciascun elemento su 0 (invisibile) e applica a Transizione CSS per una dissolvenza uniforme.

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

Potresti impostare questi stili nel foglio di stile, ma farlo sarebbe pericoloso. Se JavaScript non viene eseguito, questo approccio lascerebbe invisibile la tua sequenza temporale! Isolare questo comportamento nel file JavaScript è un buon esempio di miglioramento progressivo.

3. Richiamata dell'osservatore dell'intersezione

Definire una funzione fadeInOnScroll per modificare l'opacità degli elementi su 1 (visibile) quando si intersecano con la finestra.

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

4. Opzioni dell'osservatore intersezione

Imposta le opzioni per l'osservatore, con una soglia di 0,1 che indica che l'animazione si attiva quando è visibile il 10% di un elemento.

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

5. Creazione e utilizzo dell'osservatore dell'intersezione

Termina creando un IntersectionObserver con queste opzioni e applicandolo a ciascun elemento della sequenza temporale.

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

Il risultato finale dovrebbe assomigliare a questo:

Best practice per il componente sequenza temporale

Alcune pratiche a cui attenersi includono:

  • Ottimizza la tua timeline per diverse dimensioni dello schermo. Apprendi tecniche di progettazione reattiva per garantire un'esperienza utente fluida su tutti i dispositivi.
  • Utilizza pratiche di codifica efficienti per garantire animazioni fluide.
  • Utilizza HTML semantico, rapporti di contrasto adeguati ed etichette ARIA per una migliore accessibilità.

Dare vita alla tua timeline: un viaggio nel web design

Costruire una sequenza temporale interattiva non significa solo presentare informazioni; si tratta di creare un'esperienza coinvolgente e informativa. Combinando la struttura HTML, lo stile CSS e le animazioni JavaScript, puoi creare una sequenza temporale che affascina il tuo pubblico fornendo allo stesso tempo contenuti di valore.