Script Sample/Parallax Effect
parallaxEffect04
GYChoi
2022. 3. 11. 16:12
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 실행