html - 视差效果 - 使部分出现在前一部分后面而不移动内容
问题描述
所以我目前拥有的是一个可以正常工作的视差效果,但我不知道如何让一个部分“向上滑动”并显示下一个部分,使其看起来像一个平滑的部分过渡。目前我在第二部分的内容一直向下滚动,直到它就位,我似乎无法让它出现在第一部分的后面。我目前有这个:https ://jsfiddle.net/165pw4ks/3/ 。
索引.html:
<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>
样式.css:
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;
}
任何帮助,将不胜感激。
解决方案
推荐阅读
- c - 如何解决“距离未打印在显示器上”?
- java - 任务已安排或取消
- android - 如何使用 LOOKUP KEY 在 android 中检索联系人的详细联系信息?
- docker - 没有找到Circleci Jest?
- reactjs - 我们可以使用功能组件并与 ag-grid 表反应挂钩吗?
- vue.js - 你如何在 Laravel+Vue 中设置 css-loader?
- javascript - 如何从渲染方法之外的反应导航中获取导航参数?
- python - 为什么添加两个具有 timedelta 值的计数器会引发 TypeError?
- dart - 在 Flutter 应用程序中的 ListView 滚动上隐藏/关闭键盘
- linux - 即使安装后也没有名为 numpy 的模块