티스토리 뷰
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