Aloha ;)
Netter Fake. Kommt aber in die Sammlung.
Fake ist das A und O um mit CSS zu bekommen was man will 😀
Ist aber an der Aufgabenstellung vorbei.
Kommt drauf an. Das ist als Anregung zu verstehen - genau genommen wissen wir ja gar nicht, ob der TO wirklich so „viel“ sucht wie im ursprünglichen Vorbild oder ob ein einfaches Schrumpfen in der Höhe genügt. Je nach Wunsch lassen sich eventuell auch mehrere Fakes kombinieren, um das gewünschte zu erreichen. Ich will hier aber nicht mehr Kreativität als Notwendigkeit für ein kleines Machbarkeitsbeispiel aufbringen.
Eine der Aufgaben war, den Header (smoothing) zu verleinern, inclusive seiner Inhalte, also auch der Texte usw.. Ich habe da nur erst mal einen Weg ausprobiert, wie man das überhaupt erreichen kann, den Header zu verkleinern, nicht nur seine vermeintliche Höhe. An der Inhaltsverkleinerung muss noch gearbeitet werden.
Schau dir mal an, was ich noch geschrieben habe - ich habe mal analysiert, was genau die vorliegende Seite eigentlich tut. Der Weg beruht dann zwar immer noch auf dem Scroll-EventListener (wünschenswert wäre eine Alternative ohne), aber ist dann was die Effekte angeht beliebig erweiterbar - mit so wenig wie möglich Overhead im JS-Teil, der im schlimmsten Fall mehrmals je Sekunde ausgeführt werden muss beim Scrollen.
Grüße,
RIDER