Ich habe gerade durch die KPR-verse-Website gescrollt, als mir unten dieser coole Effekt aufgefallen ist. Immer wenn ich so etwas sehe, möchte ich es immer nachbauen. Mein Prozess ist einfach: Ich versuche zunächst, den Effekt zu reproduzieren, erstelle dann einen Blog, in dem ich erkläre, wie das geht, mit dem Ziel, komplexe Designs in leicht verständliche Schritte zu zerlegen.

Zuerst zweifle ich oft, ob ich es schaffe, aber nach einigem Nachdenken finde ich normalerweise einen Weg, das Design in Stücke zu zerlegen. Indem ich diese Teile verbinde, gelingt es mir, den Effekt zu erzielen. Genug geredet – schauen wir uns an, wie Sie es selbst herstellen können!

Den KPR-Vers-Fußzeileneffekt aufschlüsseln

Am Ende der Seite finden Sie im Hintergrund das KPR-Banner. Auf den ersten Blick mag es etwas komplex erscheinen, aber so kompliziert ist es nicht.

Erstellen Sie zunächst ein Div mit der Klasse .container. Dies wird das Stammelement für unser Tutorial sein.

Als nächstes teilen Sie den .container in zwei Teile: .subcontainer-wrapper und footer. Das Fußzeilenelement enthält das KPR-Banner.

Teilen Sie nun den .subcontainer-wrapper weiter in zwei Teile. Der obere Teil enthält den gesamten Inhalt unserer Website, während der untere Teil leer und ohne Hintergrund bleibt – im Wesentlichen unsichtbar, aber dennoch die Breite und Höhe des Ansichtsfensters aufweist. Die untere Hälfte ist entscheidend, da wir dort die Fußzeile sehen können.

Bis zu diesem Punkt befinden sich alle Elemente im normalen HTML-Fluss, also von oben nach unten. Jetzt müssen wir diese Reihenfolge durchbrechen, indem wir die Fußzeile nach hinten und den .subcontainer-wrapper nach vorne stellen. Dazu setzen wir den .subcontainer-wrapper auf position: absolute relativ zu seinem übergeordneten .container. Dadurch wird der .subcontainer-wrapper aus dem normalen DOM-Fluss entfernt.

Das ist alles, was wir brauchen, um den Effekt einzurichten. Füllen Sie nun den oberen Teil des .subcontainer-wrappers mit Inhalt, aber lassen Sie den unteren Teil – das unsichtbare Div – leer. Fügen Sie außerdem Inhalte zur Fußzeile hinzu.

Sobald Sie den Inhalt hinzugefügt haben, sollte er in etwa so aussehen.

Der obere Teil verbirgt den Hintergrund, und wenn Sie nach unten scrollen und der sichtbare Inhalt endet, wird im unsichtbaren Bereich die Fußzeile angezeigt. Voilà! Da haben Sie es – einfach und unkompliziert.

_Vielen Dank fürs Mitmachen! Ich hoffe, dass Sie diesen Leitfaden hilfreich und leicht verständlich fanden. Bleiben Sie neugierig und erkunden Sie weiter!

Original: KPR-Vers

Demo-Site: Demo-Link. Für diese Demonstration habe ich die Google I/O-Site (https://io.google/2024/) verwendet und sie angepasst, um ein ähnliches Konzept zu präsentieren.

Quellcode: Github Link_