Как сделать такую шапку?

Question

[testest]

Как сделать анимацию появления шапки, такой, как на этом сайте?

Она плавно появляется при скроллинге и перестраивается слегка.
Как такое сделать?

Comments

[profesor08]

Какая-то она дерганная. Кривая. Не лучший пример.

[Олег]

как вариант взять MDB
https://mdbootstrap.com/previews/templates/landing...

Answer 1

[Ragtime Kitty]

Появление через обычные @keyframes и forwards
Чтобы перестраивалась шапка, как уже сказали, отслеживайте скролл и добавляйте класс. Там пара строчек. С чем именно трудности?

E.g.

Answer 2

[MamaLuyba]

отслеживаешь скролл, а там уже че хочешь, то и воротишь.

Answer 3

[Сергей Котов]

setTimeout offsetTop. tranform:translate transition