Waldlauf
Responsives Webdesign mit Bootstrap und CSS Grid, abgerundet durch nahtlose, leistungsstarke JavaScript-Animationen für eine interaktive Streckenvisualisierung.
Die Herausforderung
Im Rahmen der Simulation der IHK-Abschlussprüfung galt es, eine Landingpage für die Anmeldung zu einem Waldlauf zu konzipieren. Die primäre technische Herausforderung bestand darin, eine interaktive Streckenvisualisierung mittels JavaScript zu entwickeln, die den Benutzer visuell führt. Gleichzeitig mussten strenge zeitliche Vorgaben eingehalten und eine fehlerfreie Performance auf mobilen Endgeräten (Mobile-First-Ansatz) garantiert werden.
Die Lösung
Die interaktiven Laufstrecken wurden durch maßgeschneiderte JavaScript-Logik und GSAP (ScrollTrigger) fließend animiert. Für ein authentisches, organisches Nutzererlebnis wurden detaillierte Geländekarten eigens in Procreate illustriert. Ergänzend dazu entstanden spezifische, vektorbasierte Sport-Icons in Adobe Illustrator. Das technische Fundament bildet ein semantisch sauberes HTML5-Gerüst, kombiniert mit modernen CSS-Grid-Layouts und dem Bootstrap-Framework.
