[idolumvisions]

Hallo Forum,

ich möchte meine Portfolio Website endlich mal erneuern und springe in diesem Zuge auf den ganzen neuen hippen Krams um. D.h. ich möchte eine Single Page Website auf der der Header 100% des Viewports einnimmt. Wenn man die Seite dann runter scrollt, soll der Header immer kleiner werden, bis dieser sich in eine fixe Navigation verwandelt.

So etwas sieht man ja öfters, aber jetzt da ich es brauche, fallen mir weder die ganzen Begriffe für diese Technik ein, noch finde ich geeignete Beispiele. Deshalb habe ich ein animiertes GIF gebastelt, wo man das ganze besser nachvollziehen kann.




Wenn ihr mir also Tutorials dafür nennen könnt, wäre ich euch sehr dankbar.
Ich möchte soweit wie nur möglich CSS dafür nutzen, wenn aber JS/JQuery dafür notwendig sein sollte, muss dieses schon fertig vorliegen oder gut dokumentiert sein, denn ich kenne mich damit so gut wie nicht aus.
Ach ja, Responsible muss das ganze auch sein.


Wünsche euch einen schönen Abend,

idolum

[Eisensafran]

Sowas in der Art? Klick mich!
Ich würd's mit Bootstrap umsetzen, aber da gehen die Meinungen der Webworker stark auseinander.

[Thirteen]

Moin idolum!

Hier noch ein Tutorial dazu: Animated Resizing Header On Scroll

Vielleicht hilft dir das weiter, auch hinsichtlich von möglichen Suchbegriffen

[SimonDerDude]

Dat heißt reschbonsiff

[idolumvisions]

Danke euch, werde mir die zwei Sachen heute Abend genauer ansehen.