Skapa en interaktiv tidslinje med CSS och JavaScript

av

Viktiga takeaways

  • En kraftfull tidslinje är lätt att bygga med CSS och JavaScript.
  • Börja med att beskriva tidslinjens HTML-struktur och utforma tidslinjeelementen med CSS.
  • Fortsätt att lägga till animering på tidslinjen med JavaScript. Du kan använda Intersection Observer API för att tona in tidslinjeobjekt på scroll.

Tidslinjer är kraftfulla visuella verktyg som hjälper användare att navigera och förstå kronologiska händelser. Utforska hur du skapar en interaktiv tidslinje med den dynamiska duon CSS och JavaScript.

Bygga tidslinjestrukturen

Börja med att beskriva HTML-strukturen i index.html. Skapa händelser och datum som separata komponenter, vilket lägger grunden för den interaktiva tidslinjen.

 <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>

För närvarande ser din komponent ut så här:

Välj en layout för din tidslinje: Vertikal vs. Horisontell

När du designar en interaktiv tidslinje kan du välja antingen en vertikal eller horisontell stil. Vertikala tidslinjer är lätta att använda, särskilt på telefoner, eftersom det är den typiska riktningen som webbplatser rullar i. Om din tidslinje har mycket innehåll kommer detta förmodligen att vara den mest bekväma layouten.

Horisontella tidslinjer är dock tilltalande på breda skärmar och är bra för kreativa webbplatser med färre detaljer, som kan minimera rullning från sida till sida. Varje stil har sina förmåner, lämpliga för olika typer av webbplatser och användarupplevelser.

Style tidslinjen med CSS

Det finns tre typer av visuella element som du kommer att utforma för tidslinjen: linjer, noder och datummarkörer.

  • Linjer: En central vertikal linje, skapad med Timeline__content::after pseudo-elementet, fungerar som ryggraden i tidslinjen. Den är utformad med en specifik bredd och färg, placerad helt för att passa in i mitten av tidslinjeobjekten. 
     .Timeline__content::after {
      background-color: var(--clr-purple);
      content: "";
      position: absolute;
      left: calc(50% - 2px);
      width: 0.4rem;
      height: 97%;
      z-index: -5;
    }
  • Noder: Cirklar, utformade med cirkelklassen, fungerar som noder på tidslinjen. Dessa är absolut placerade i mitten av varje tidslinjeobjekt och är visuellt distinkta med en bakgrundsfärg som bildar nyckelpunkterna längs tidslinjen. 
     .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;
    }
  • Datummarkörer: Datumen, utformade med klassen Timeline__date, visas på vardera sidan av tidslinjen. Deras placering växlar mellan vänster och höger för varje tidslinjeobjekt, vilket skapar en förskjuten, balanserad look längs tidslinjen. 
     .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;}

Kolla in hela uppsättningen stilar från GitHub-repo i style.css.

Efter styling ska din komponent se ut så här:

Animera med JavaScript

För att animera den här komponenten, använd Intersection Observer API för att animera tidslinjeobjekt på scroll. Lägg till följande kod till script.js.

1. Inledande installation

Välj först alla element med klassen Timeline__item.

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

2. Inledande styling av tidslinjeobjekt

Ställ in den initiala opaciteten för varje objekt till 0 (osynlig) och använd en CSS-övergång för jämn blekning.

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

Du kan ställa in dessa stilar i stilmallen, men det skulle vara farligt att göra det. Om JavaScript inte fungerar, skulle det tillvägagångssättet lämna din tidslinje osynlig! Att isolera detta beteende i JavaScript-filen är ett bra exempel på progressiv förbättring.

3. Intersection Observer Callback

Definiera en fadeInOnScroll-funktion för att ändra opaciteten för objekt till 1 (synlig) när de korsar visningsporten.

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

4. Intersection Observer Options

Ställ in alternativen för observatören, med ett tröskelvärde på 0,1 som indikerar att animeringen utlöses när 10 % av ett objekt är synligt.

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

5. Skapa och använda Intersection Observer

Avsluta genom att skapa en IntersectionObserver med dessa alternativ och tillämpa den på varje tidslinjeobjekt.

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

Slutresultatet ska se ut så här:

Bästa praxis för tidslinjekomponent

Några metoder att följa inkluderar:

  • Optimera din tidslinje för olika skärmstorlekar. Lär dig responsiva designtekniker för att säkerställa en sömlös användarupplevelse på alla enheter.
  • Använd effektiv kodning för att säkerställa smidiga animationer.
  • Använd semantisk HTML, korrekta kontrastförhållanden och ARIA-etiketter för bättre tillgänglighet.

Bringing Your Timeline to Life: A Journey in Web Design

Att bygga en interaktiv tidslinje handlar inte bara om att presentera information; det handlar om att skapa en engagerande och informativ upplevelse. Genom att kombinera HTML-struktur, CSS-stil och JavaScript-animationer kan du skapa en tidslinje som fängslar din publik samtidigt som du levererar värdefullt innehåll.