С помощью JavaScript страница прокручивает первый блок на нужное количество пикселей.
Первый блок имеет меньший z-index, и второй наезжает на него.
Также футер имеет меньший z-index и при скролле открывается.
+ все оформлено простой анимацией появления при скроле на определенную высоту (с помощью JavaScript)
Например, отсюда можно взять
https://daneden.github.io/animate.css/