Html 视差效果-使节显示在前一节后面,而不移动内容
所以我现在有一个视差效果,效果很好,但我不知道如何使一个部分“向上滑动”并显示下一个部分,使它看起来像一个平滑的部分过渡。目前,我在第二部分的内容一直向下滚动,直到它就位为止,我似乎无法让它出现在第一部分后面。我现在有这个: index.html:Html 视差效果-使节显示在前一节后面,而不移动内容,html,css,parallax,Html,Css,Parallax,所以我现在有一个视差效果,效果很好,但我不知道如何使一个部分“向上滑动”并显示下一个部分,使它看起来像一个平滑的部分过渡。目前,我在第二部分的内容一直向下滚动,直到它就位为止,我似乎无法让它出现在第一部分后面。我现在有这个: index.html: <div class="parallax-wrapper"> <div class="frame-top"></div> <section class="parallax-section pa
<div class="parallax-wrapper">
<div class="frame-top"></div>
<section class="parallax-section part1">
<div class="frame-bottom"></div>
<div class="part1-sticky-container">
<div class="part1-sticky">
</div>
</div>
</section>
<section class="parallax-section part2">
<div class="part2-content">
<h1 class="part2-text">
Some text here
</h1>
</div>
</section>
</div>
我想做的是这样的:
任何帮助都将不胜感激
body {
margin: 0;
}
.parallax-wrapper {
top: 100vh;
}
.parallax-section {
position: relative;
}
.part1 {
background: url("https://place-hold.it/1920x1080") no-repeat;
width: 100vw;
height: 100vh;
background-size: cover;
z-index: 4;
}
.frame-bottom {
position: sticky;
z-index: 100;
top: calc(100vh - 40px);
height: 40px;
width: 100%;
background-color: #111;
}
.part2 {
margin: 0;
background: url("https://place-hold.it/1920x1080") no-repeat;
background-size: 100vw;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: 1;
}
.part2-content {
position: sticky;
width: 30rem;
height: 5rem;
z-index: 1;
background-attachment: scroll;
background-color: transparent;
margin-left: calc(50% - 15rem);
top: calc(50% - 2.5rem);
}
.part2-text {
margin: 0;
color: white;
font-size: 32px;
text-align: center;
}