Как сделать появление текста при прокрутке страницы

Question

Как можно сделать на сайте, чтобы при прокрутке вниз появлялся текст(просто появлялся без выдвижений), а после прокрутки текста, он постепенно исчезал.

Пример: https://intranetboy.webflow.io/

Answer 1

Предложу такой вариант с появлением и исчезанием текста при скроле...

let t
const o = document.querySelector('#txt')
document.querySelector('#container').addEventListener('scroll', _ => {
  if (t) clearTimeout(t)
  o.classList.add('on')
  t = setTimeout(_ => o.classList.remove('on'), 1000)
})

#container {
  height: 200px;
  overflow: scroll;
}
#container > div {
  height: 2000px;
}
#txt {
  position: fixed;
  bottom: 50px;
  right: 50px;
  border: 1px solid;
  border-radius: 5px;
  padding: 10px;
  display: inline-block;
  transition-property: opacity;
  transition-duration: 2s;
  opacity: 0;
}
#txt.on {
  opacity: 1;
}

<div id='container'>
  <div><div>
<div>
<div id='txt'>Пример текста<div>

Answer 2

Можно вот так это сделать:

const txt = document.querySelector("#txt");


window.addEventListener('scroll', e => {
  if (pageYOffset >= 220) {
    txt.classList.add("op");
  } else {
    txt.classList.remove("op");
  }
});

body {
  min-height: 500px;
  background-color: black;
  color: white;
}

.txt {
  margin-top: 300px;
  opacity: 0;
  transition: opacity .5s;
}

.op {
  opacity: 100;
}

<div id="txt" class="txt">Какойто текст Какойто текст Какойто текст Какойто текст Какойто текст Какойто текст Какойто текст Какойто текст Какойто текст Какойто текст Какойто текст Какойто текст Какойто текст Какойто текст Какойто текст Какойто текст Какойто текст Какойто текст Какойто текст Какойто текст Какойто текст Какойто текст Какойто текст Какойто текст Какойто текст Какойто текст Какойто текст Какойто текст</div>

БЛОГ НА HUSL

Как сделать появление текста при прокрутке страницы

Ответы (2 шт):