Scrolling наложения изображений на чистом CSS

Question

Можно ли, используя только css и html, полностью прокрутить внутренний div (оверлейный красный div) перед прокруткой вниз остальной части страницы?
По сути, интересно, возможна ли прокрутка наложения при замораживании предыдущего div только в css?
Затем, когда красный div исчезнет, разморозьте фоновую прокрутку и продолжите. Подобно как сделано на этом сайте здесь: https://humaan.com/.

Или нужно будет использовать какой-то JavaScript?

.headervideo{background-color:blue; width:100%; height:900px;}
.headerbreak{width:100%; height:300px;}

.headervideo #inner-box {
  background-color: red;
  height: 90%;
  width: 100%;
}

<div class="headervideo">
  <div id="inner-box"></div>
</div>

<div class="headerbreak">
<div>

_{Свободный перевод вопроса Pure CSS overlay scrolling от участника @Cameron Cole.}

Answer 1

position: sticky может сделать это примерно так:

.headervideo {
  background: url(https://picsum.photos/id/1064/800/800) center/cover;
  height: 100vh;
  position: relative;
  z-index: 2;
}

.nextsection {
  background: url(https://picsum.photos/id/107/800/800) center/cover;
  height: 100vh;
  margin-top: -100vh;
  position: sticky;
  top: 0;
}

.container {
  height:200vh;
}

body {
  margin: 0;
}

<div class="container">
  <div class="headervideo"></div>

  <div class="nextsection"></div>
</div>

<div style="height:150vh"> more content later </div>

_{Свободный перевод ответа от участника @Temani Afif}

Answer 2

Полностью согласен с автором соседнего ответа. Я полюбопытствовал и сам убедился в том, что на сайте https://humaan.com/ именно такое значение - sticky у свойства position для реализации этого интересного эффекта и используется. И раз уже исчерпывающий ответ к вопросу имеется, то, проявляя слабость к подобным эффектам при прокрутке страницы, просто не могу не поделиться еще одним не менее интересным вариантом, в котором не только используется свойство position: sticky, но еще и перспектива. Вот его пример:

* {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>

БЛОГ НА HUSL

Scrolling наложения изображений на чистом CSS

Ответы (2 шт):