我想制作一个具有视差效果的水平部分。背景应该是一张图片,以与页面不同的速度滚动。
问题在于:我希望视差元素包含在父元素中,因此父元素就像子元素的掩膜一样工作:子元素只在父元素的边界内可见。
我知道可以通过将带有遮挡并在"视差"元素上面的背景的两个元素之间放置视差元素来实现这一点,但这种方法对我的情况不适用。
显然的想法是在父元素上使用 overflow: hidden。但是这会破坏3D变换,所以没有剩余的视差效果。
如何实现所描述的效果?
这里有一个 Codepen:https://codepen.io/rradarr/full/mdwgard。我希望红色矩形在黑色边框的“视差容器”外不可见。
我知道可以通过将带有遮挡并在"视差"元素上面的背景的两个元素之间放置视差元素来实现这一点,但这种方法对我的情况不适用。
显然的想法是在父元素上使用 overflow: hidden。但是这会破坏3D变换,所以没有剩余的视差效果。
如何实现所描述的效果?
这里有一个 Codepen:https://codepen.io/rradarr/full/mdwgard。我希望红色矩形在黑色边框的“视差容器”外不可见。
* {
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>