czy można zrobić scroll w vanila js lub css

Question

Hej

mam pytanie. chciałabym zrobić na stronie stopniowe pojawianie się napisu gdy scrolluje stronę. Jest bardo dużo tutoriali ale z jquerry, a ja chciałabym zwykły vanilla js. Próbowałam już z setTimeout i transition(delay), ale nic mi nie wychodzi :/ Może jakaś wskazówka?

 

udało mi się zrobić taki kod

const title = document.querySelectorAll('.title');
    console.log(title);
            
    window.document.addEventListener('scroll', function(){
        title.forEach((e) => {
            e.style.opacity = "1";
            e.style.transition = "opacity 2s ease" 
        });
        
    })

mam w css styl title, gdzie opacity = 0. Mimo wszystko nie działa to tak jakbym chciała :/ Tekst pojawia się jednocześnie po odświeżeniu strony a nie gdy zaczynam go przewijać :(

Answer 1

Polecam poczytać o Intersection Observer – powstał właśnie do takich rzeczy.

Comments

Rzecz podana w linku przez ciebie jest znacznie wydajniejsza niż przepuszczanie pożądanych elementów przez pętle i stosowania dla nich efektu gdy spełniają warunek, z eventem scroll?

 

Pytam bo jestem ciekaw

---

Powinna być – zwłaszcza, że to przeglądarka sama ustalana, kiedy odpalić callback.