Der Header wird beim Scrollen klarer lesbar
Solange man oben im Hero ist, bleibt der Header transparent. Dadurch wirkt der Einstieg offener und moderner. Beim Scrollen trennt sich der Header optisch vom Hintergrund und wird besser nutzbar.
Am Anfang liegt der Header transparent direkt auf dem Hero-Bereich und wirkt dadurch wie Teil des Einstiegs. Sobald man nach unten scrollt, bekommt der Header einen dunklen Hintergrund, Blur und mehr visuelle Trennung.
Solange man oben im Hero ist, bleibt der Header transparent. Dadurch wirkt der Einstieg offener und moderner. Beim Scrollen trennt sich der Header optisch vom Hintergrund und wird besser nutzbar.
Hintergrund, Blur, Schatten und Höhe ändern sich gleichzeitig mit einem ruhigen Übergang. Das sorgt für einen hochwertigen Eindruck und unterstützt die Nutzerführung.
Dieser Effekt funktioniert besonders gut bei Unternehmensseiten, Agenturauftritten und modernen Landingpages, bei denen der erste Eindruck stark und aufgeräumt wirken soll.
Scrollen Sie einfach auf dieser Demo-Seite nach unten und wieder nach oben. So sehen Sie sofort, wie Header und Hero zuerst zusammenwirken und sich beim Scrollen sichtbar voneinander lösen.