Mit den Grundkonzepten von HTML, CSS und JS haben Sie im Handumdrehen eine attraktive Zeitleiste erstellt.

Die zentralen Thesen

  • Mit CSS und JavaScript lässt sich ganz einfach eine leistungsstarke Zeitleiste erstellen.
  • Beginnen Sie damit, die HTML-Struktur der Timeline zu skizzieren und die Timeline-Elemente mit CSS zu gestalten.
  • Fügen Sie mithilfe von JavaScript weiterhin Animationen zur Zeitleiste hinzu. Sie können die Intersection Observer-API verwenden, um Timeline-Elemente beim Scrollen einzublenden.

Zeitleisten sind leistungsstarke visuelle Tools, die Benutzern helfen, chronologische Ereignisse zu navigieren und zu verstehen. Entdecken Sie, wie Sie mit dem dynamischen Duo aus CSS und JavaScript eine interaktive Zeitleiste erstellen.

Aufbau der Zeitleistenstruktur

Den vollständigen Code für dieses Projekt finden Sie hier GitHub-Repository.

Skizzieren Sie zunächst die HTML-Struktur in index.html. Erstellen Sie Ereignisse und Termine als separate Komponenten und legen Sie so den Grundstein für die interaktive Zeitleiste.

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>

Im Moment sieht Ihre Komponente so aus:

Wählen Sie ein Layout für Ihre Timeline: Vertikal vs. Horizontal

Beim Entwerfen einer interaktiven Zeitleiste können Sie zwischen einem vertikalen und einem horizontalen Stil wählen. Vertikale Zeitleisten sind insbesondere auf Mobiltelefonen einfach zu verwenden, da dies die typische Scrollrichtung von Websites ist. Wenn Ihre Timeline viele Inhalte enthält, ist dies wahrscheinlich das bequemste Layout.

Horizontale Zeitleisten sind jedoch auf Breitbildschirmen attraktiv und eignen sich hervorragend für kreative Websites mit weniger Details, die das seitliche Scrollen minimieren können. Jeder Stil hat seine Vorteile und eignet sich für verschiedene Arten von Websites und Benutzererfahrungen.

Gestalten Sie die Zeitleiste mit CSS

Es gibt drei Arten von visuellen Elementen, die Sie für die Zeitleiste gestalten: Linien, Knoten und Datumsmarkierungen.

  • Linien: Eine zentrale vertikale Linie, die mithilfe des Timeline__content:: after-Pseudoelements erstellt wurde, dient als Rückgrat der Timeline. Es ist mit einer bestimmten Breite und Farbe gestaltet und so positioniert, dass es genau mit der Mitte der Timeline-Elemente übereinstimmt.
    .Timeline__content::after {
    background-color: var(--clr-purple);
    content: "";
    position: absolute;
    left: calc(50% - 2px);
    width: 0.4rem;
    height: 97%;
    z-index: -5;
    }
  • Knoten: Mit der Circle-Klasse gestaltete Kreise fungieren als Knoten auf der Zeitleiste. Diese befinden sich absolut in der Mitte jedes Zeitleistenelements und sind durch eine Hintergrundfarbe optisch deutlich erkennbar, sodass sie die Schlüsselpunkte entlang der Zeitleiste bilden.
    .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;
    }
  • Datumsmarkierungen: Die mithilfe der Timeline__date-Klasse formatierten Daten werden auf beiden Seiten der Zeitleiste angezeigt. Ihre Positionierung wechselt für jedes Timeline-Element zwischen links und rechts, wodurch ein gestaffeltes, ausgewogenes Erscheinungsbild entlang der Timeline entsteht.
    .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;}

Schauen Sie sich die gesamte Stilpalette von an GitHub-Repo in style.css.

Nach dem Styling sollte Ihre Komponente so aussehen:

Animieren mit JavaScript

Um diese Komponente zu animieren, verwenden Sie die Intersection Observer API um Timeline-Elemente beim Scrollen zu animieren. Fügen Sie den folgenden Code hinzu script.js.

1. Ersteinrichtung

Wählen Sie zunächst alle Elemente mit der Klasse Timeline__item aus.

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

2. Anfängliches Styling von Timeline-Elementen

Setzen Sie die anfängliche Deckkraft jedes Elements auf 0 (unsichtbar) und wenden Sie a an CSS-Übergang für sanftes Überblenden.

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

Sie könnten diese Stile im Stylesheet festlegen, dies wäre jedoch gefährlich. Wenn das JavaScript nicht ausgeführt werden kann, würde dieser Ansatz dazu führen, dass Ihre Zeitleiste unsichtbar bleibt! Ein gutes Beispiel dafür ist die Isolierung dieses Verhaltens in der JavaScript-Datei Progressive Enhancement.

3. Rückruf des Kreuzungsbeobachters

Definieren Sie eine fadeInOnScroll-Funktion, um die Deckkraft von Elementen auf 1 (sichtbar) zu ändern, wenn sie das Ansichtsfenster überschneiden.

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

4. Optionen für Kreuzungsbeobachter

Legen Sie die Optionen für den Beobachter fest, wobei ein Schwellenwert von 0,1 angibt, dass die Animation ausgelöst wird, wenn 10 % eines Elements sichtbar sind.

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

5. Erstellen und Verwenden des Intersection Observer

Erstellen Sie abschließend einen IntersectionObserver mit diesen Optionen und wenden Sie ihn auf jedes Timeline-Element an.

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

Das Endergebnis sollte so aussehen:

Best Practices für Timeline-Komponenten

Zu den zu beachtenden Praktiken gehören:

  • Optimieren Sie Ihre Zeitleiste für verschiedene Bildschirmgrößen. Erlernen Sie Responsive-Design-Techniken, um ein nahtloses Benutzererlebnis auf allen Geräten zu gewährleisten.
  • Nutzen Sie effiziente Codierungspraktiken, um reibungslose Animationen sicherzustellen.
  • Verwenden Sie semantisches HTML, richtige Kontrastverhältnisse und ARIA-Beschriftungen für bessere Zugänglichkeit.

Erwecken Sie Ihre Zeitleiste zum Leben: Eine Reise ins Webdesign

Beim Aufbau einer interaktiven Zeitleiste geht es nicht nur um die Präsentation von Informationen; Es geht darum, ein ansprechendes und informatives Erlebnis zu schaffen. Durch die Kombination von HTML-Struktur, CSS-Stil und JavaScript-Animationen können Sie eine Zeitleiste erstellen, die Ihr Publikum fesselt und gleichzeitig wertvolle Inhalte liefert.