[ad_1]
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!
[ad_2]