패럴랙스 이펙트07 : 리빌 효과

 //만약에 reveal 클래스가 있는데
        //글씨를 span으로 감싸주고
        //글씨를 다시 넣어주기         
        const descWrap = document.querySelectorAll(".content__item__desc");
        descWrap.forEach(desc=>{            
            if(desc.classList.contains("reveal")){  //content__item__desc에 reveal 클래스가 포함되어 있으면.
                let Text = desc.innerText;                
                Text = "<span>" + Text + "</span>";
                desc.innerHTML = Text; 
            }                               
        });
        

        //requestAnimationFrame()을 이용한 보다 효율적인 코딩.
        function scroll(){
            let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop;
            document.querySelector(".srcollTop").innerText = Math.round(scrollTop);

            const reveal = document.querySelectorAll(".reveal");

            reveal.forEach(el=>{
               let revealOffset = el.offsetTop + el.parentElement.offsetTop;
               let revealDelay = el.dataset.delay;                          //data-delay 변수 지정.
               
            //    if(scrollTop > revealOffset - window.innerHeight/2){
            //        el.classList.add("show");
            //    }
            //시간차로 작동하게 작업
                if(scrollTop > revealOffset - window.innerHeight/2){
                    if(revealDelay == undefined){               //data가 없으면 show 클래스 그냥 추가.
                        el.classList.add("show");
                    } else {                                    //data-delay가 있으면 시간차로 show 추가.
                        setTimeout(()=>{
                            el.classList.add("show");
                        },revealDelay)              //변수 지정한 data-delay값 (500)
                    }
                }
            })                        
            requestAnimationFrame(scroll)   //재귀함수의 예 (자기자신을 호출)
        }
        scroll();

 

 

이번 예제는 스타일에서 작업을 한 후 리빌 효과를 주는 예제입니다. 

스크롤이 내려감에 따라 박스가 가려지면서 나오는 효과 입니다. 

우선 span 태그를 자바스크립트로 html에 넣어주는 작업을 해줍니다.

 

클래스에 data-delay를 만들어서 스크립트에서 setTimeout 함수를 이용해서 데이타 값이 들어가는 부분만 시간차로 나오게 작업해줍니다.