I’m trying to build a header graphic that contains text and a video. I need to build a layer with a few background images over the top of this. When a user scrolls past this element I’d like the text/video to scroll at a normal speed but the graphics in the background to scroll (upward) more quickly than the text content.

Here’s an example of what I’m working with. I can get the .icons div with background images to scroll more quickly than the header content but as expected it’s adding a scrollbar due to the transform. Users then have to scroll that entire added height (including overflow) before they can progress past the header.

.header {
  min-height: 400px;
  display: block;
  background: blue;
  perspective: 400px;
  overflow-x: hidden;
  overflow-y: auto;
}

.header .icons {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 15;
  filter: blur(7px);
  opacity: .6;
  background: url("https://picsum.photos/200") 85% 80% no-repeat;
  background-size: auto, auto;
  background-size: 150px;
  transform: translateZ(200px);
}

.body {
  display: block;
  min-height: 750px;
  background: red;
}

<div class="header">
  <div class="content">
    <h1>Header Here</h1>
  </div>
  <div class="icons">

  </div>
</div>
<div class="body">

</div>

I used this page as a resource.

How can I clean this up to preserve the different scroll speeds between these layers but only for the height of the header itself, not the entirety of the overflowed content?

Thank you!