04. 패럴랙스 스크롤링 효과 : 나타나기

        // window.addEventListener("scroll", () => {
        //     let scrollTop = window.pageYOffset || document.documentElement.scrollTop  ||  window.scrollY; 
        //     document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);
        // });

        function scroll() {
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop  ||  window.scrollY; 
            document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);

            // if(scrollTop > document.getElementById("section1").offsetTop){
            //     document.getElementById("section1").classList.add("show");
            // }

            document.querySelectorAll(".content__item").forEach(el => {
                if(scrollTop >= el.offsetTop-window.innerHeight/2){ //scrollTop+window.innerHeight/2
                    el.classList.add("show")
                }
            });

            requestAnimationFrame(scroll);
        }
        scroll();

패럴랙스04 사이트