Как можно сделать эффект параллакса для заголовка, чтобы при прокрутке страницы вниз заголовок не сразу прокручивался за пределы экрана, а притормаживал спускаясь немного ниже (к нижнему краю своей секции)?
body {
margin: 0;
padding: 0;
color: white;
text-align: center;
}
section {
position: relative;
height: 100vh;
}
section:nth-child(1),
section:nth-child(4) {
background-color: olivedrab;
}
section:nth-child(2) {
background: seagreen;
}
section:nth-child(3) {
background: darkolivegreen;
}
h1,
h2,
h3,
h4 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2rem;
}
<section>
<h1>Заголовок</h1>
</section>
<section>
<h2>Подзаголовок 1</h2>
</section>
<section>
<h3>Подзаголовок 2</h3>
</section>
<section>
<h4>Подзаголовок 3</h4>
</section>