Horizontale Zeitleisten für maximale Interaktivität
Horizontale Layouts bieten mehr Platz und Flexibilität. Wir zeigen, wie Sie sie responsive gestalten und mit Scroll-Effekten verbessern.
Warum horizontale Zeitleisten anders sind
Vertikale Zeitleisten funktionieren gut auf Mobilgeräten, aber horizontale Layouts? Die nutzen den verfügbaren Platz einfach besser. Auf einem Desktop-Monitor können Sie mehr Einträge gleichzeitig sehen, ohne dass der Nutzer viel scrollen muss. Das schafft ein anderes Gefühl – weniger linear, mehr explorativ.
Die Herausforderung liegt darin, sie responsive zu machen. Sie können nicht einfach eine breite Zeitleiste auf dem Handy anzeigen. Sie müssen clever umschalten, clever zoomen, clever filtern. Genau da kommt diese Anleitung ins Spiel.
Die drei Kernelemente
Was Sie bauen müssen, um eine funktionierende horizontale Zeitleiste zu schaffen.
Horizontale Achse
Der Container muss breiter als die Viewport sein. Das funktioniert mit overflow-x: auto oder mit einem Scroll-Wrapper, der nur horizontal scrollbar ist.
Flexible Einträge
Jeder Eintrag muss eine feste Breite haben, damit sie in einer Reihe bleiben. Mit Flexbox und flex: 0 0 280px erreichen Sie konsistente Abstände.
Interaktive Marker
Marker sollten hoverfähig sein. Wenn Sie einen Eintrag berühren, sollte er größer werden, die Farbe ändern oder Details anzeigen.
Das Markup verstehen
Der HTML-Aufbau ist gar nicht kompliziert. Sie brauchen einen äußeren Container, der overflow-x: auto hat. Darin sitzt die Zeitleiste selbst – das ist ein Flexbox-Element mit flex-direction: row. Jeder Eintrag bekommt eine feste Breite, damit Sie wissen, wie viel Platz er einnimmt.
Das wichtige ist: Der äußere Container muss eine maximale Höhe haben, sonst wird alles zu groß. Und die Einträge sollten mit white-space: nowrap arbeiten, damit Text nicht umfließt und alles sauber in einer Zeile bleibt.
Tipp: Nutzen Sie CSS-Variablen für die Breite der Einträge (z.B. –entry-width: 280px). So können Sie später leicht ändern, ohne den ganzen Code durchzusehen.
Responsive werden – aber richtig
Hier kommt die Magie: Auf Mobilgeräten funktioniert eine horizontale Zeitleiste nicht wirklich. Sie’re zu schmal. Also müssen Sie umschalten. Ein Media Query bei 768px ist ein guter Startpunkt. Darunter: Zeitleiste wird vertikal. Darüber: Zeitleiste bleibt horizontal.
Für die vertikale Version ändern Sie einfach flex-direction: row zu flex-direction: column. Die Einträge bekommen volle Breite (flex: 0 0 100%) und die Höhe wird automatisch. Das sieht auf dem Handy viel besser aus – es fühlt sich nicht gequetscht an.
- Desktop (1024px+): overflow-x: auto, flex-direction: row
- Tablet (768-1023px): Mix möglich – evtl. kürzere Einträge
- Mobile (<768px): flex-direction: column, volle Breite
Scroll-Effekte und Interaktion
Das ist wo die horizontale Zeitleiste wirklich glänzt. Während der Nutzer scrollt, können Sie Einträge enthüllen, die Farbe wechseln oder Animationen triggern. Mit Intersection Observer API wird das einfach – Sie prüfen, welche Einträge im Viewport sind und triggern dann CSS-Animationen.
Ein häufiges Muster: Der Marker wird größer, wenn er in den Viewport kommt. Der Text faded rein. Die Linie zwischen den Markern wird farbig. Das passiert alles mit transform: scale() und opacity-Übergängen. Nicht JavaScript – nur CSS mit transition.
Hover-Effekte: transform: scale(1.2) und box-shadow Erhöhung
Scroll-Animation: Mit data-attributes und CSS-Selektoren
Smooth Scrolling: scroll-behavior: smooth für Navigations-Links
Wichtiger Hinweis
Die in diesem Artikel beschriebenen Techniken und Code-Beispiele sind zu Bildungszwecken gedacht. Browser-Kompatibilität variiert – testen Sie immer in Ihren Zielgeräten. Für ältere Browser (IE 11) benötigen Sie möglicherweise Polyfills oder alternative Ansätze. Diese Anleitung bietet keine Garantie für spezifische Funktionalität in Ihrem Projekt – die Umsetzung hängt von Ihrem technischen Setup ab.
Zusammengefasst
Horizontale Zeitleisten sind nicht kompliziert, wenn Sie die Grundlagen verstehen. Ein Flexbox-Container mit overflow-x: auto, feste Breiten für die Einträge, und ein Media Query zum Umschalten auf Mobilgeräten – das ist alles, was Sie brauchen. Scroll-Effekte machen es interessant. Hover-States machen es interaktiv.
Das Wichtigste: Testen Sie früh auf echten Geräten. Ein horizontales Layout auf dem Tablet fühlt sich anders an als auf dem Desktop. Und was auf dem Desktop großartig aussieht, kann auf dem Handy zu eng werden. Mit den Techniken aus diesem Artikel haben Sie die Werkzeuge, um das richtig zu machen.
Bereit, Ihre eigene horizontale Zeitleiste zu bauen?
Weitere Ressourcen erkunden
Weiterführende Artikel
