所以我不太确定我是否正确地问了这个问题...基本上在我的小提琴中,我有两个绝对定位的h1,并且它们略微不在屏幕上(不要调整窗口,它尚未响应),我我想知道如何在用户滚动时使它们向内“重新出现”。
我看过一些js.paroller之类的jQuery插件,但我想知道是否可以使用纯CSS和关键帧来实现这一点。
如果以前已经有人问过我,谁能指出我正确的方向?谢谢!
https://jsfiddle.net/codingcrafter/c6f9tbxo/5/
.hero-two {
overflow: hidden;
position: relative;
min-height: 500px;
}
.para-ele {
position: absolute;
width: 100%;
font-size: 3rem;
}
.hero-first {
left: 75%;
top: 15%;
}
.hero-second {
left: -20%;
bottom: 10%;
}
<div class="hero-two">
<h1 class="h1 hero-first para-ele">
Right most text.
</h1>
<h1 class="h1 hero-second para-ele">
Left most text.
</h1>
</div>