Skapa en interaktiv tidslinje med CSS och JavaScript

Innehållsförteckning

Viktiga punkter

Det är enkelt att konstruera en dynamisk tidslinje med hjälp av CSS och JavaScript.
Inled med att definiera tidslinjens HTML-struktur och applicera CSS-stilar för att utforma tidslinjeelementen.
Fortsätt med att implementera animationer på tidslinjen genom JavaScript, till exempel genom att använda Intersection Observer API för att gradvis visa tidslinjeelement när de kommer in i synfältet under skrollning.

Tidslinjer är effektiva visuella verktyg som underlättar för användare att navigera genom och förstå en sekvens av händelser i kronologisk ordning. Upptäck hur man skapar en interaktiv tidslinje med den kraftfulla kombinationen av CSS och JavaScript.

Skapa grundstrukturen för tidslinjen

Börja med att strukturera din HTML i filen index.html. Skapa händelser och datum som individuella komponenter, vilket skapar grunden för en interaktiv tidslinje.

 <section class="timeline-section">
  <div class="container">
   <div class="Timeline__header">
    <h2>Tidslinje</h2>
     <p class="heading--title">
      Här är tidsplanen vi har planerat <br />
      för det kommande evenemanget.
     </p>
   </div>
   <div class="Timeline__content">
     <div class="Timeline__item">
      <div class="Timeline__text">
       <h3>Händelse 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>Händelse 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>

Din komponent kommer initialt att se ut ungefär så här:

Välj en tidslinje layout: Vertikal eller horisontell

Vid utformningen av en interaktiv tidslinje har du valet mellan en vertikal eller horisontell layout. Vertikala tidslinjer är användarvänliga, särskilt på mobila enheter, eftersom de anpassar sig till den vanliga skrollningsriktningen på webbsidor. Om tidslinjen innehåller mycket information är detta sannolikt det mest bekväma alternativet.

Horisontella tidslinjer är visuellt tilltalande på breda skärmar och passar bra för kreativa webbplatser med mindre innehåll, där sidledsskrollning kan minimeras. Varje stil har sina unika fördelar och lämpar sig för olika typer av webbplatser och användarupplevelser.

Formge tidslinjen med CSS

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

Linjer: En central, vertikal linje, skapad med pseudo-elementet `Timeline__content::after`, utgör tidslinjens ryggrad. Denna linje får en bestämd bredd och färg och placeras centralt för att harmonisera med 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, formade med klassen `circle`, fungerar som noder på tidslinjen. Dessa placeras absolut i mitten av varje tidslinjeobjekt och är visuellt framträdande med en distinkt bakgrundsfärg som markerar nyckelpunkter 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, som utformas med klassen `Timeline__date`, visas växelvis på vardera sidan av tidslinjen. Deras position alternerar mellan vänster och höger för varje tidslinjeobjekt, vilket skapar en balanserad och dynamisk visuell effekt.

 .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;}

Se den fullständiga uppsättningen av stilar i GitHub-repot style.css.

Efter applicering av stilarna kommer komponenten att se ut ungefär så här:

Animera med JavaScript

För att animera komponenten kan du använda Intersection Observer API för att animera tidslinjeobjekt när de skrollas in i vy. Lägg till följande kod i script.js:

1. Grundläggande Inställning

Börja med att välja alla element med klassen `Timeline__item`.

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

2. Inledande Styling av Tidslinjeobjekt

Sätt den initiala opaciteten för varje objekt till 0 (osynligt) och implementera en CSS-övergång för en jämn inbländning.

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

Dessa stilar kan ställas in direkt i stilmallen, men det kan vara riskabelt. Om JavaScript inte körs, skulle tidslinjen förbli osynlig! Att isolera detta beteende i JavaScript-filen är ett bra exempel på progressiv förbättring.

3. Intersection Observer Callback-funktion

Skapa en `fadeInOnScroll`-funktion för att ändra opaciteten för element till 1 (synliga) när de skär visningsområdet.

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

4. Intersection Observer Alternativ

Definiera inställningar för observatören, med ett tröskelvärde på 0.1, vilket betyder att animationen aktiveras när 10% av ett objekt är synligt.

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

5. Skapa och Använd Intersection Observer

Slutför genom att skapa en `IntersectionObserver` med angivna alternativ och applicera den på varje tidslinjeobjekt.

 const observer = new IntersectionObserver(fadeInOnScroll, options);

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

Slutresultatet kommer att se ut som i exemplet ovan.

Riktlinjer för Tidslinjekomponenter

Några viktiga metoder att följa inkluderar:

Optimera tidslinjen för olika skärmstorlekar. Använd responsiva designmetoder för att ge en konsekvent användarupplevelse på alla enheter.
Använd effektiv kodning för att säkerställa mjuka animationer.
Använd semantisk HTML, korrekt kontrast och ARIA-attribut för att förbättra tillgängligheten.

Ge liv åt din Tidslinje: En Resa i Webdesign

Att skapa en interaktiv tidslinje handlar inte enbart om att visa information, det handlar om att erbjuda en engagerande och informativ upplevelse. Genom att kombinera strukturerad HTML, stilfull CSS och dynamiska JavaScript-animationer kan du skapa en tidslinje som inte bara informerar utan även engagerar din publik.