Parallax Effect 07 - 리빌 효과

function scroll(){
    let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop;
            
    const reveal = document.querySelectorAll(".reveal");
    reveal.forEach(el => {
        let revealOffset = el.offsetTop + el.parentElement.offsetTop;
        let revealDelay = el.dataset.delay;

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


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

 

스크롤을 내릴때 박스가 생기고 나서 이미지와 텍스트가 나오게 효과를 주었습니다.

reveal 이란 클래스를 만들고 재활용할 수 있게 만들었습니다.

여기서 setTimeout 함수를 이용하여 스크롤이 한번에 내려와도 

이미지와 텍스트 효과가 각각 시간차를 두고 실행될 수 있게 만들었습니다.

자세한 내용은 전체사이트에 소스를 확인해주세요!

 

 

전체 사이트 보기