Hamburger Volksbank, Jahresrückblick 2025
Vollständige Landingpage mit scrollbasierten Animationen und Slider-Erlebnissen für die Hamburger Volksbank
Überblick
Die Jahresrückblick-Landingpage für die Hamburger Volksbank ist eine vollständig eigenständige, scrollgetriebene Präsenz, umgesetzt als Microfrontend in Vue.js mit TypeScript und nahtlos in den Atruvia Content Manager integriert. Das gestalterische Leitmotiv sind die scrollbasierten Animationen: Inhalte gleiten, skalieren und erscheinen präzise getaktet im Viewport, für ein Erlebnis, das weit über klassische Banking-Webseiten hinausgeht. Jede Sektion ist choreografiert, nicht statisch. Die Slider-Architektur ist zweigeteilt: Vollbild-Slider für Hero-Momente und kompakte Mini-Slider für Kennzahlen und Highlights, jeweils eigens optimiert für Touch, Tastatur und Screenreader. Die Microfrontend-Architektur ermöglicht dabei vollständige Entkopplung vom Host-System des Atruvia Content Managers. Technisch basiert die Umsetzung auf Vue 3 mit Composition API und TypeScript, eine klare, typsichere Komponentenstruktur, die Wartbarkeit und Erweiterbarkeit garantiert. Barrierefreiheit nach WCAG 2.1 war dabei von Anfang an kein optionales Feature, sondern fester Bestandteil des Entwicklungsprozesses.
Herausforderung
Umsetzung einer modernen, animationsgetriebenen Landingpage mit Slider-Komponenten innerhalb der strikten technischen Vorgaben der Atruvia-Plattform, bei gleichzeitig höchsten gestalterischen Ansprüchen der Hamburger Volksbank.
Lösung
Vue 3 Microfrontend mit TypeScript und scrollbasierten Animationen. Vollbild- und Mini-Slider als eigenständige Komponenten mit Touch-, Tastatur- und Screenreader-Unterstützung. Nahtlose Integration in den Atruvia Content Manager mit WCAG 2.1-konformer Umsetzung.
Key Features
Scrollbasierte Animationen
Durchgängig choreografierte Scroll-Trigger-Animationen, Inhalte erscheinen, gleiten und skalieren präzise im Viewport für ein modernes, lebendiges Seitenerlebnis
Vollbild- & Mini-Slider
Zweiteilige Slider-Architektur: Vollbild-Slider für Hero-Momente und kompakte Mini-Slider für Kennzahlen, jeweils für Touch, Tastatur und Screenreader optimiert
Vue 3 + TypeScript Microfrontend
Vollständig typsichere Komponentenarchitektur mit Composition API, entkoppelt vom Host-System und einfach wartbar
Atruvia-Integration
Nahtlose Einbindung in den Content Manager der zentralen Banking-Plattform für Volksbanken, innerhalb aller Compliance- und Plattformvorgaben
Barrierefreiheit
WCAG 2.1-konforme Umsetzung von Anfang an: ARIA-Labels, Tastaturbedienbarkeit und semantisches HTML, auch für alle animierten und interaktiven Elemente
Project Gallery
