Bygg interaktiv tidslinje med CSS & JavaScript: Guide med kode!

by
Tweet
Share
Share
Pin
0 Shares

Viktige Punkter

  • En dynamisk tidslinje kan enkelt konstrueres ved hjelp av CSS og JavaScript.
  • Start med å definere tidslinjens HTML-struktur og style elementene med CSS.
  • Forbedre tidslinjen med animasjoner ved hjelp av JavaScript. Du kan bruke Intersection Observer API for å skape en «fade-in» effekt når elementer kommer til syne under scrolling.

Tidslinjer er effektive visuelle hjelpemidler som hjelper brukere med å navigere gjennom og forstå kronologiske hendelser. La oss utforske hvordan du kan lage en interaktiv tidslinje ved hjelp av den dynamiske kombinasjonen av CSS og JavaScript.

Oppbygging av Tidslinjestrukturen

For å begynne, må du skissere HTML-strukturen i `index.html`. Lag separate komponenter for hendelser og datoer. Dette danner grunnlaget for den interaktive tidslinjen.

<body>
  <section class="timeline-section">
    <div class="container">
      <div class="Timeline__header">
        <h2>Tidslinje</h2>
        <p class="heading--title">
          Her er oversikten over tiden vi forventer å <br />
          bruke på det kommende arrangementet.
        </p>
      </div>
      <div class="Timeline__content">
        <div class="Timeline__item">
          <div class="Timeline__text">
            <h3>Begivenhet 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. des 2023</h3>
        </div>
        <div class="Timeline__item">
          <div class="Timeline__text">
            <h3>Begivenhet 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. des 2023</h3>
        </div>
      </div>
    </div>
  </section>
</body>

Slik ser komponenten din ut på dette stadiet:

Velg Layout for Tidslinjen: Vertikal eller Horisontal

Når du designer en interaktiv tidslinje, kan du velge mellom en vertikal eller horisontal stil. Vertikale tidslinjer er lett å bruke, spesielt på mobilenheter. Det er den vanlige retningen for nettsider å scrolle. Hvis tidslinjen din har mye innhold, kan dette være den mest praktiske løsningen.

Horisontale tidslinjer ser bra ut på store skjermer. De passer godt for kreative nettsider med mindre innhold. Det kan være en god løsning for å minimere sideveis scrolling. Hver stil har sine egne fordeler og er egnet for ulike typer nettsteder og brukeropplevelser.

Styling av Tidslinjen med CSS

Det er tre hovedelementer du vil style for tidslinjen din: linjer, noder og datomarkører.

  • Linjer: En sentral vertikal linje, skapt ved hjelp av pseudo-elementet `Timeline__content::after`, fungerer som selve stammen på tidslinjen. Den er stylet med en bestemt bredde og farge. Den er absolutt plassert for å være sentrert i forhold til tidslinjeelementene.

    .Timeline__content::after {
  background-color: var(--clr-purple);
  content: "";
  position: absolute;
  left: calc(50% - 2px);
  width: 0.4rem;
  height: 97%;
  z-index: -5;
}
  • Noder: Sirklene, som er stylet med klassen `.circle`, fungerer som noder på tidslinjen. Disse er absolutt plassert midt i hvert tidslinjeelement. De har en egen bakgrunnsfarge, noe som skaper distinkte punkter langs 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;
}
  • Datomarkører: Datoene, som er stylet med klassen `Timeline__date`, vises på hver side av tidslinjen. Plasseringen veksler mellom venstre og høyre for hvert tidslinjeelement. Dette gir et forskjøvet, men balansert utseende.

    .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 hele CSS-koden i GitHub-repoet i `style.css`.

Etter styling skal komponenten din se slik ut:

Animering med JavaScript

For å animere denne komponenten, bruk Intersection Observer API for å animere tidslinjeelementer mens du scroller. Legg til følgende kode i `script.js`.

1. Innledende Oppsett

Først velger du alle elementene med klassen `Timeline__item`.

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

2. Innledende Styling av Tidslinjeelementer

Sett den innledende opasiteten til hvert element til 0 (usynlig) og bruk CSS-overganger for å skape en jevn «fade-in»-effekt.

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

Du kunne satt disse stilene i stilarket, men det ville vært en dårlig idé. Hvis JavaScript ikke kjører, vil denne metoden gjøre tidslinjen din usynlig! Det er en god praksis å isolere denne typen oppførsel i JavaScript-filen. Dette er et godt eksempel på progressiv forbedring.

3. Intersection Observer Callback

Definer en `fadeInOnScroll`-funksjon for å endre opasiteten til elementer til 1 (synlig) når de krysser synsfeltet.

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

4. Intersection Observer Options

Sett innstillinger for observatøren. Bruk en terskel på 0.1. Dette indikerer at animasjonen skal trigges når 10% av et element er synlig.

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

5. Opprett og Bruk Intersection Observer

Til slutt opprett en `IntersectionObserver` med disse innstillingene. Bruk den på hvert tidslinjeelement.

const observer = new IntersectionObserver(fadeInOnScroll, options);

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

Det endelige resultatet skal se slik ut:

Beste Praksis for Tidslinjekomponenter

Her er noen praksiser du bør følge:

  • Optimaliser tidslinjen for ulike skjermstørrelser. Lær responsive designteknikker for å sikre en god brukeropplevelse på alle enheter.
  • Bruk effektiv kode for å sikre at animasjonene går jevnt.
  • Bruk semantisk HTML, riktig kontrastforhold og ARIA-attributter for å forbedre tilgjengeligheten.

Gi Tidslinjen Liv: En Reise i Webdesign

Å bygge en interaktiv tidslinje handler ikke bare om å presentere informasjon. Det handler om å skape en engasjerende og informativ opplevelse. Ved å kombinere HTML-struktur, CSS-styling og JavaScript-animasjoner kan du lage en tidslinje som fenger publikum og samtidig leverer verdifullt innhold.