Parallax Effect 04 - 나타나기

function scroll(){
    let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop;
    document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);

    let content = document.querySelectorAll(".content__item");
    content.forEach(el=>{
        if(scrollTop > el.offsetTop - window.innerHeight/2){
            el.classList.add("show");
        }
    })

    requestAnimationFrame(scroll)
}
scroll();

 

스크롤을 내렸을 때, 스크롤 값과 이미지의 offsetTop을 비교하여

해당영역에 도달했을 때 컨텐츠를 나타나게 표현하였습니다.

스크립트 부분은 어려운게 없고

CSS부분을 자유롭게 처리하여 다양하게 활용할 수 있습니다.

 

* 스크롤값과 offsetTop값 비교시에 컨텐츠가 스크롤끝에 도달했을 때 보여집니다.

  이러한 부분을 수정하기 위해 window.innerHeight의 절반(화면절반)을 빼주어서 기준점을 맞춰줬습니다.

 

 

전체 사이트 보기