Всем привет, пытался сделать прикольный эффект при скроле страницы: есть секция с заголовком, заголовок прозрачный с обводкой, при прокрутке страницы, когда снизу появляется заголовок, примерно через 100px от нижнего края экрана по мере скролла он начинает заливаться снизу вверх, т.е. например мы остановились в половине залитого текста и он так и остался, пошли дальше, начал снова заливаться.
Так же, когда у нас расстояние от верхнего края до заголовка так же где-то 100px, то заливка уже начинает сходить сверху вниз, вот такая идея, на подобии этого сайта, только там на сколько известно у них скролл кастомный и они все двигают транслейтами. Нужно сделать что-то похожее, но на стандартном скроле, если возможно. Картинка для наглядности.
моя статическая попытка посмотреть как это работает:
section {
background-color: #6da7ff;
color: tomato;
height: 100vh;
text-align: center;
position: relative;
}
div:first-child {
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 100px;
font-weight: bold;
-webkit-text-stroke: 2px tomato;
-webkit-text-fill-color: transparent;
}
div:last-child {
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 100px;
font-weight: bold;
clip: rect(0, 1500px, 800px, 0);
}
<section>
<div >Заголовок</div>
<div>Заголовок</div>
</section>
Как разобраться с js так и не смог понять..