IntersectionObserver() 사용
요즘 많은 웹 페이지들이 스크롤 애니메이션을 구현하여
조금 더 멋있어(?) 보이는 웹 페이지를 만들고 있다.
이런 웹 페이지는 어떻게 만들 수 있을까?
예전에는 HTML의 높이 요소를 측정하여
scroll EventListener를 사용해 많이 구현을 했지만
요즘에는 다른 방법으로 스크롤 애니메이션을 만든다.
new IntersectionObserver()라는 기능을 사용하면 편리하게 사용할 수 있다.
이 기능을 사용하면 현재 HTML 요소가 화면에 보이는지 파악하기 쉬워진다.
우선 애니메이션이 보여질 수 있게 기본적인 세팅부터 해보자.
<body>
<style>
body {
background-color: black;
height: 6000px;
}
div {
margin-top: 1000px;
color: white;
text-align: center;
font-size: 3em;
}
</style>
<div>1번째</div>
<div>2번째</div>
<div>3번째</div>
<div>4번째</div>
<div>5번째</div>
<script>
</script>
</body>
우선, 여기에 글자가 나타나면 투명도를 바꿔주는 기능을 추가해보자.
이 기능을 추가하기 위해서는 위에서 말했던 new IntersectionObserver()를 사용해야 한다.
IntersectionObserver()의 기본적인 구조는 ()안에 함수가 올 수 있게 되어있다.
따라서,
new IntersectionObserver(()=>{})이것이 기본적인 구조가 될 수 있다.
이제 이것을 아래와 같이 변수에 저장하면
let observer = new IntersectionObserver(()=>{})
observer.observe() // html 요소를 감시해줌변수명.observe()라는 함수를 사용할 수 있다.
이 함수는 html 요소를 감시하는 역할을 한다. 그래서 ()안에 감시할 html 요소를 넣어주면 된다.
그래서 나는 아래와 같이 코드를 작성해 보았다.
const div = document.querySelectorAll("div");
observer.observe(div[0]) // html 요소를 감시해줌
observer.observe(div[1])
observer.observe(div[2])
observer.observe(div[3])
observer.observe(div[4])HTML에 있는 모든 <div>태그를 가져와 div라는 변수에 저장하고
첫 번째 div부터 마지막 div까지 모두 감시할 수 있게 만들어 주었다.
이 다음 무엇을 해야하는가?
아까 만들어 놓은
let observer = new IntersectionObserver() 안에 있는
() => { } 함수를 만들어 주면 된다.
다시 말해, observe가 HTML의 요소를 감시하다 발견을 하면
아래와 같이 저 부분을 실행시켜 주는 것이다.
그렇다면 우리는 저 위치에 투명도를 바꿔주는 코드만 작성하면 된다.
let observer = new IntersectionObserver(()=>{
//감시 중 박스가 화면에 등장하면 이 부분이 실행
})우선 css의 div 태그에
opacity: 0; transition: all 3s; 를 추가해 줘 처음에는 화면에 안 나오게 설정을 해봤다.
div {
margin-top: 1000px;
color: white;
text-align: center;
font-size: 3em;
opacity: 0;
transition: all 3s;
}
그 다음 함수 안에 아래와 같이 작성을 해 주었다.
forEach로 반복문을 돌리고
그 안에 화면에 보일때만 투명도를 1로 변경하기 위해
if-else문으로 조건을 주었다.
조건식인 (box.isIntersecting)은 화면이 보일때 알아서 true값이 된다.
<script>
let observer = new IntersectionObserver((e) => {
//감시 중 박스가 화면에 등장하면 이 부분이 실행
e.forEach((box) => {
if (box.isIntersecting) {
box.target.style.opacity = 1;
} else {
box.target.style.opacity = 0;
}
});
});
const div = document.querySelectorAll("div");
observer.observe(div[0]); // html 요소를 감시해줌
observer.observe(div[1]);
observer.observe(div[2]);
observer.observe(div[3]);
observer.observe(div[4]);
</script>결과(스크롤을 천천히 내려야 보임...)
참고 영상
https://www.youtube.com/watch?v=e4Afka5IOZ8
'WEB' 카테고리의 다른 글
| 라이브러리(Library) VS 프레임워크(Framework) (0) | 2023.10.25 |
|---|---|
| [WEB] SPA, CSR, SSR 차이 (0) | 2023.10.19 |
| [Git / GitHub] Git으로 GitHub에 프로젝트 올리는 법 (0) | 2022.12.28 |
| HTML/CSS/JS로 게임 만들기 3 (0) | 2022.09.16 |
| [WEB] HTML/CSS/JS로 게임 만들기 2 (0) | 2022.09.15 |
