Die Interaktive Kartengalerie ist eine UI-Komponente mit fächerförmigem Kartenlayout und einer großzügigen Fokusansicht pro Karte. Ziel war eine starke visuelle Wirkung bei gleichzeitig klarer Bedienlogik.
Ein Klick auf eine Karte öffnet den Detailmodus mit weichen Übergängen und mehreren Schließwegen. Die Oberfläche ist für Desktop und Mobile ausgelegt und bleibt auch bei schnellen Interaktionen stabil.
Das Projekt ist mit HTML, CSS und Vanilla JavaScript umgesetzt und in mehrere kleine JS-Module aufgeteilt. Dadurch bleiben Rendering, Fokussteuerung und Interaktionslogik sauber getrennt.
Die Galerie verarbeitet Maus-, Touch- und Tastatureingaben einheitlich, damit Öffnen, Schließen und Navigation konsistent funktionieren. Bilder und Daten sind über relative Pfade eingebunden.
Besonderer Fokus lag auf zugänglicher Tastaturführung mit sichtbaren Fokuszuständen sowie einer robusten Escape- und Pfeiltasten-Navigation im Fokusmodus.
EscapeArrow Left/RightBei der Interaktiven Kartengalerie habe ich gelernt, wie wichtig ein gut orchestriertes Zusammenspiel von Animation, Fokusmanagement und Eingabelogik ist. Besonders hilfreich war die modulare Aufteilung, weil sich damit neue Interaktionen deutlich kontrollierter ergänzen und testen lassen.