티스토리 뷰

{
        document.querySelectorAll(".content__item__desc").forEach(desc=>{

        let descText = desc.innerText;
        let descWrap = "<span>" + descText + "</span>";
            desc.innerHTML = descWrap;
            if(desc.classList.contains(".reveal")){
                desc.innerHTML = descText
            } else {
                desc.innerHTML = descWrap;
            }
        })
        function scroll(){
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY  
            
            const reveal = document.querySelectorAll(".reveal");
            reveal.forEach(elem =>{
                let revealOffetset = elem.offsetTop + elem.parentElement.offsetTop;
                let revealDelay = elem.dataset.delay;            //데이터가 있는지 없는지 dataset로 가져옴

                //만약에 reveal 클래스가 있는데 
                //글씨를 span으로 감싸주고
                //글씨를 다 넣어주기
                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();
}
댓글
© 2018 webstoryboy