Parallax Effect - 리빌 효과

 

설명

현재 스크롤값에 따라서 섹션을 이동할때 섹션에 박스가 지나간 뒤 이미지와 텍스트가 나타납니다.

현재 스크롤값을 구한 뒤 각 섹션별 offsetTop값에 도달하면 css를 이용해 박스모션이 지나간 뒤 이미지와 텍스트가 나타납니다.
리빌 효과의 포인트는 박스의 출발지점 위치를 잡는것이 포인트 입니다.

//만약에 .reveal 클래스가 있으면 글씨를 span으로 감싸주고 글씨를 다시 넣어줘야 함
let desc = document.querySelectorAll(".content__item__desc")
desc.forEach(el => {
    let reveal = el.innerText;
    if(el.classList.contains("reveal") == true){
        
        reveal = "" + reveal + ""
        el.innerHTML = reveal
    }
})

function scroll(){
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY;
    document.querySelector(".scrollTop span").innerText = Math.round(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/1.3){
            if(revealDelay == undefined){
                el.classList.add("show");
            } else {
                setTimeout(() => {
                    el.classList.add("show");
                }, revealDelay)
            }
        }
    })
    requestAnimationFrame(scroll)
}
scroll();