티스토리 뷰

https://garenchoi.github.io/webs_class/javascript/effect/parallaxEffect04.html

function scroll(){		//함수 scroll선언
	let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop;
     //변수 scrollTop에 브라우저의 pageYOffset값 또는 html의 scrollTop값 또는 브라우저의 screenY값 저장
    document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);	//클래스 scrollTop의 span태그에 Math.round(scrollTop)값 출력

	document.querySelectorAll(".content__item").forEach((e,i) => {		//클래스 content__item들을 선택해 element값을 e에 index갑을 i에 저장
    	if(scrollTop > e.offsetTop - window.innerHeight/2){		//scrollTop값이 e의 offsetTop값 - 브라우저의 높이/2 값보다 클때
        	e.classList.add("show");		//e에 클래스 show 추가
        };
    });
            
    requestAnimationFrame(scroll);		//requestAnimationFrame으로 scroll 실행
}
scroll();		//함수 scroll 실행

'Script Sample > Parallax Effect' 카테고리의 다른 글

parallaxEffect06  (0) 2022.03.11
parallaxEffect05  (0) 2022.03.11
parallaxEffect03  (0) 2022.03.07
parallaxEffect02  (0) 2022.03.07
parallaxEffect01  (0) 2022.03.02
댓글
© 2018 webstoryboy