* {margin: 0; padding: 0;}
.perspective {
background: url(https://picsum.photos/id/1011/800/800) center/cover;
width: 100vw; height: 100vh;
overflow-y: scroll; overflow-x: hidden;
perspective: 1px;
}
header {
background: url(https://picsum.photos/id/1064/800/800) center/cover;
width: inherit; height: inherit;
transform: matrix3d( 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1) translateZ(-2px);
display: flex;
}
footer {
position: fixed; top: 30vh;
width: 100vw; height: 100vh;
display: flex; z-index: -1;
}
.wrapper {
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0vh, rgba(255, 255, 255, 1) 25vh);
width: inherit; height: 500vh;
margin-top: 25vh; padding: 25vh 0 0;
}
.wrp {width: 100%; max-width: 300px; margin: 0 auto;}
h1, h2 {margin: auto; color: #fff; font-size: 4rem; filter: drop-shadow(0 0 5px #000);}
footer h2 {position: sticky; top: 15vh;}
h3 {font-size: 2rem; padding-bottom: 20px; text-align: center;}
p {font-size: 1.1rem; line-height: 1.5; text-align: center;}
span {display: block; padding-top: 20px; text-align: right; color: gray;}
<article class="perspective">
<header>
<h1>Сергей Есенин</h1>
</header>
<div class="wrapper">
<div class="wrp">
<h3>Что это такое?</h2>
<p>В этот лес завороженный,<br> По пушинкам серебра,<br> Я с винтовкой заряженной<br> На охоту шел вчера.<br> По дорожке чистой, гладкой<br> Я прошел, не наследил…<br> Кто ж катался здесь украдкой?<br> Кто здесь падал и ходил?<br> Подойду, взгляну поближе:<br>Хрупкий снег изломан весь.<br> Здесь вот когти, дальше — лыжи…<br> Кто-то странный бегал здесь.<br> Кабы твердо знал я тайну<br> Заколдованным речам,<br> Я узнал бы хоть случайно,<br> Кто здесь бродит по ночам.<br>Из-за елки бы высокой<br>Подсмотрел я на кругу:<br> Кто глубокий след далекий<br> Оставляет на снегу?</p><span>1914 г.</span>
</div>
</div>
<footer>
<h2>Русский поэт</h2>
</footer>
</article>