패럴랙스 이펙트04. : 나타나기

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

            //forEach 을 이용한 show 클래스 추가
            document.querySelectorAll(".content__item").forEach((el,i)=>{
                if(scrollTop > el.offsetTop - window.innerHeight/2){
                    el.classList.add("show");
                }
            });
            
            requestAnimationFrame(scroll)   //재귀함수의 예 (자기자신을 호출)
        }
        scroll();


 

 

이번 예제는 처음에는 안보이지만 스크롤을 내려감에 따라서 이미지가 나타나는 효과 예제입니다. 

스크립트는 forEach메서드를 이용해서 간단하게 작업했습니다. 

나머지 부분은 CSS의 opacity 와 트랜지션을 이용해서 작업합니다.