I'm currently working on creating a horizontal section with a parallax effect. My goal is to have an image in the background that scrolls at a different speed than the rest of the page.
My challenge lies in containing the parallax element within its parent element, essentially using the parent as a mask for the child: ensuring that the child is only visible within the boundaries set by the parent.
While one potential solution involves placing the parallax element between two elements with backgrounds that obstruct it from view, this method does not suit my specific case.
An obvious approach would be to use overflow: hidden on the parent element. However, this breaks the 3D transforms and eliminates the parallax effect altogether.
I'm seeking guidance on how to achieve the desired effect described above.
If you'd like to take a look at the code, here's a link to a Codepen example: https://codepen.io/rradarr/full/mdwgard. Essentially, I want the red rectangle to remain visible only within the "parallax-container" bordered in black.
* {
margin: 0;
}
html, body {
height: 100%
}
main {
position: relative;
width: 100%;
perspective: 1px;
transform-style: preserve-3d;
overflow-y: auto;
overflow-x: hidden;
height: 100vh;
background-color: blue;
}
.static {
min-height: 800px;
}
.parallax-container {
border: solid black 3px;
height: 600px;
width: 100%;
transform-style: preserve-3d;
position: relative;
}
.parallax-child {
position: relative;
width: 100%;
height: 100%;
transform: translateZ(-2px) scale(2.01);
z-index: -1;
}
#img-or-whatever {
height: 900px;
width: 100%;
background-color: red;
position: relative;
z-index: -1;
}<main>
<div class="static"></div>
<div class="parallax-container">
<div class="parallax-child">
<div id="img-or-whatever"></div>
</div>
</div>
<div class="static"></div>
</main>