07. 패럴랙스 스크롤링 효과 : 리빌 효과

        //숙제: 만약에 reveal 클래스가 있는 //글씨를 span으로 감싸주고 //글씨를 다 넣어줘야 함

       //여러개 글씨 쪼개기
       document.querySelectorAll(".content__item__desc").forEach(desc => { //글자(= desc) 선택(다중)
            let splitText = desc.innerText; //.content__item__desc의 text값 가져오기
            let splitWrap = splitText.split('').join(""); //.content__item__desc의 텍스트 한 글자 사이마다  삽입
            splitWrap = "" + splitWrap + ""; //desc의 텍스트를 ~로 감싸줌
            desc.innerHTML = splitWrap; //desc에 splitWrap값을 삽입
            desc.setAttribute("aria-label", splitText); //splitText에 aria-label속성 값을 설정
        });

        function scroll() {
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY;

            const reveal = document.querySelectorAll(".reveal");
            
            reveal.forEach(elem => { //elem = reveal
                let revealOffetset = elem.offsetTop + elem.parentElement.offsetTop;
                let revealDelay = elem.dataset.delay;

                if(scrollTop >=revealOffetset - window.innerHeight/2){
                    elem.classList.add("show"); //스크롤 할때 show가 붙음
                }

                if(scrollTop >= revealOffetset - window.innerHeight/2){
                    if(revealDelay == undefined){
                        elem.classList.add("show");
                    } else {
                        setTimeout(()=>{
                            elem.classList.add("show");
                        }, revealDelay)
                    } 
                }

            })
            document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);
            requestAnimationFrame(scroll);
        }
        scroll();

패럴랙스07 사이트