Parallax Effect - 나타나기 효과

 

설명

현재 스크롤값에 따라서 섹션을 이동하면 섹션이 보이지 않다가 하나씩 나타납니다.

먼저 각 섹션별 offsetTop값을 구하고 현재 스크롤값이 각 섹션별 offsetTop값보다 같거나 커질 경우 숨겨놓았던 섹션에 애니메이션을 추가해준 뒤 나타나게 보여집니다.

function scroll(){
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY;
    document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);
    
    document.querySelectorAll(".content__item").forEach(el => {
        if(scrollTop > el.offsetTop - window.innerHeight/1.5){
            el.classList.add("show");
        }
    })

    requestAnimationFrame(scroll)
}
scroll();