티스토리 뷰

개발/javascript

[자바스크립트, js] new IntersectionObserver 로 element 모니터링 하기 (feat. 무한스크롤, 애니메이션)

한솔방울 2022. 11. 23. 19:41
반응형

안녕하세요!

 

이번엔 무한스크롤, 페이지 애니메이션을 줄때 주로 사용하는 intersectionObserver에 대해 설명해보려고 합니다!

 

애니메이션 효과를 주는 방법은 여러가지가 있죠! Scroll 이벤트도 있고, intersectionObserver도 있구.. 이번엔 intersectionobserver을 사용해보려고 합니다. 

 

듣기론 ..? toss에서 intersectionobserver을 사용한다는것 같기도 하고..? 쨋던 intersectionobserver 가 뭐냐?

Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법입니다.

공식 문세는 이렇게 정의하고 있습니다. 비동기적 관찰..? 크.. 벌써부터 군침이 돌죠? 그리고 또 공식문서에는!!

페이지가 스크롤 되는 도중에 발생하는 이미지나 다른 컨텐츠의 지연 로딩.
스크롤 시에, 더 많은 컨텐츠가 로드 및 렌더링되어 사용자가 페이지를 이동하지 않아도 되게 하는 infinite-scroll 을 구현.
광고 수익을 계산하기 위한 용도로 광고의 가시성 보고.
사용자에게 결과가 표시되는 여부에 따라 작업이나 애니메이션을 수행할 지 여부를 결정.

라고 사용처를 적어두었더라구요. 저기있는 infinite-scroll! 무한 스크롤때도 쓸 수 있답니다. 저희 팀에서는 이미 무한스크롤을 intersectionobserver을 통해서 사용하고 있습니다.

 

오늘은 intersectionobserver을 통해 화면에 보여질때 움직이는 애니메이션을 만들어보도록 하겠습니다.

 

우선 html을 만들어보겠습니다. 높이가 1000px인 div 안에 box를 만들어보았습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div class="bg">
        <div class="box"></div>
    </div>
    <div class="bg">
        <div class="box"></div>
    </div>
    <div class="bg">
        <div class="box"></div>
    </div>
    <div class="bg">
        <div class="box"></div>
    </div>
    <div class="bg">
        <div class="box"></div>
    </div>
    <div class="bg">
        <div class="box"></div>
    </div>
    <script src="./script.js"></script>
</body>

</html>

총 6개의 div에 box들을 보여주는데, 화면에 등장 시 box를 움직이게 진행해보도록 하겠습니다.

 

css는 다음과 같이 작성하였습니다.

.bg {
  background-color: #fff;
  height: 1000px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 80px;
  height: 80px;
  background-color: aquamarine;
  border-radius: 16px;
}

.move {
  transform-origin: 50% 0%;
  animation-name: shake;
  animation-duration: 1s;
  /* animation-iteration-count: infinite; */
  /* animation-delay: 0.5s; */
}


@keyframes shake {
  0% {
    transform: rotate(0deg);
  }

  10% {
    transform: rotate(45deg);
  }

  20% {
    transform: rotate(-45deg);
  }

  30% {
    transform: rotate(30deg);
  }

  40% {
    transform: rotate(-30deg);
  }

  50% {
    transform: rotate(10deg);
  }

  60% {
    transform: rotate(-10deg);
  }

  70% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

우리는 화면에 등장하면 move 클래스를 넣으려고 합니다. 그럼 어떻게 js를 구현해야 할까요?

const io = new IntersectionObserver((item) => {
  item.forEach((entry) => {
    if (entry.intersectionRatio) {
      entry.target.classList.add('move');
    }
    else {
      entry.target.classList.remove('move');
    }
  })
})

let box = document.querySelectorAll('.box')

box.forEach((el) => {
  io.observe(el)
})

우선 생성자 InterSectionObserver를 하나 만듭니다. 그리고 box elements들을 모두 찾아둡니다. 저는 querySelectorAll을 통해 .box 클래스를 갖고있는 element를 전부 불러왔습니다.

 

모두 불러온 box를 io.observe()에 넣어 변화를 관찰 시작합니다!

 

intersectionRatio를 통해 변화를 체크할 수 있습니다. 화면에 등장한다면 1, 등장하지 않는다면 0을 넘겨줍니다. 그렇다면?? 우리는 화면에 등장한 1 시점에 move를 넣어주고, 화면에 사라지는 순간인 0 시점에 move를 제거해주면 됩니다.

 

그럼 이런 화면이 나오죠!

근데? 지나온 페이지를 다시 갔을 때 또 흔들릴 필요는 없을수도 있잖아요? 그럴 땐 else 파트를 제거해주면 됩니다! 그럼 내려올땐 애니메이션이 있지만 올라갈땐 없을 것입니다!

 

이렇게 말이죠!!

 

어떤가요? 나름 재밌지 않나요? 그럼 이걸 가지고 어떻게 무한스크롤을 만들 수 있을까여? 쉽습니다.. 그냥 리스트 맨 아래에 넣고 그 빈 태그가 등장하면 다시 페이지에 + 10이든 해서 추가해 넣어주면 됩니다..

 

인프런에 three.js 를 구매했는데.. (8.8만원..) 이제부터 바닐라.js를 좀 공부해보려고 합니다.

 

인터렉티브한 웹을 만들고싶어서 랄까.. 그리고 개발자가 애니메이션도 만들 줄 알아야지.. 란 생각으로.. ㅋㅋㅋㅋ

 

꼭 조만간 three.js로 만든 웹을 공유해보는 시간을 가져보았으면 합니다. (이제 시간도 많을 것 같으니..)

 

꼭 6개월뒤에 나는 좀 더 성장하길 바랍니다...... 이번 이직 시즌은 전부 망했으니 ㅎㅎ..

 

그럼 다음에 뵈어요..!

반응형

'개발 > javascript' 카테고리의 다른 글

포멧팅? 이젠 new Intl()로 사용해보자!  (0) 2022.12.14
[자바스크립트, js] set !! set... set 써보기  (0) 2022.11.23
[F12, 개발자도구] 개발자도구 F12로 실시간 변수 모니터링 하기  (0) 2022.11.22