0

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

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

1
  • Пожалуйста, исправьте вопрос, чтобы он отражал конкретную проблему с достаточным количеством деталей для возможности дать адекватный ответ. 28 дек 2022 в 13:12

2 ответа 2

0

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

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>

0

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

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.