Как можно сделать на сайте, чтобы при прокрутке вниз появлялся текст(просто появлялся без выдвижений), а после прокрутки текста, он постепенно исчезал.
Пример: https://intranetboy.webflow.io/
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуКак можно сделать на сайте, чтобы при прокрутке вниз появлялся текст(просто появлялся без выдвижений), а после прокрутки текста, он постепенно исчезал.
Пример: https://intranetboy.webflow.io/
Предложу такой вариант с появлением и исчезанием текста при скроле...
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>
Можно вот так это сделать:
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>