Так что я не совсем уверен, правильно ли я задаю этот вопрос ... в основном, в моей скрипке у меня есть два абсолютно позиционированных h1, и у меня они немного за пределами экрана (не настраивайте окно, пока оно не реагирует), и ямне интересно, как бы я делал так, чтобы каждый из них "появлялся" внутри при прокрутке пользователя.
Я смотрел на несколько плагинов jQuery, таких как js.paroller, но мне было интересно, смогу ли я пойти по этому поводус чистым 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>