Erstellen einer interaktiven Zeitleiste mit CSS und JavaScript

2023/11/17

Die zentralen Thesen

Mit CSS und JavaScript lässt sich ganz einfach eine leistungsstarke Zeitleiste erstellen.
Beginnen Sie damit, die HTML-Struktur der Zeitleiste zu skizzieren und die Zeitleistenelemente 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

Sie können den vollständigen Code für dieses Projekt im GitHub-Repository abrufen .

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.

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

Im Moment sieht Ihre Komponente so aus:

Wählen Sie ein Layout für Ihre Zeitleiste: vertikal oder horizontal

Beim Entwerfen einer interaktiven Zeitleiste können Sie zwischen einem vertikalen und einem horizontalen Stil wählen. Vertikale Zeitleisten sind einfach zu verwenden, insbesondere auf Mobiltelefonen, da dies die typische Scrollrichtung auf Websites ist. Wenn Ihre Zeitleiste 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 formatieren: Linien, Knoten und Datumsmarkierungen.

Linien : Eine zentrale vertikale Linie, die mithilfe des Pseudoelements Timeline__content::after erstellt wurde, dient als Rückgrat der Zeitleiste. 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 Datumsangaben 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 den vollständigen Stilsatz aus dem GitHub-Repo in style.css an .

Nach dem Styling sollte Ihre Komponente so aussehen:

Animieren mit JavaScript

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

1. Ersteinrichtung

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

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

2. Erstes Styling von Timeline-Elementen

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

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! Die Isolierung dieses Verhaltens in der JavaScript-Datei ist ein gutes Beispiel für eine progressive Verbesserung .

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 den 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 , geeignete Kontrastverhältnisse und ARIA-Beschriftungen für eine 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.