水平视差效果可在用户滚动条上显示绝对位于屏幕外的文字

时间:2019-10-04 20:08:09

标签: javascript jquery html css

所以我不太确定我是否正确地问了这个问题...基本上在我的小提琴中,我有两个绝对定位的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>

0 个答案:

没有答案