스크롤하면 카드가 뒤집어지는 효과 주기 😁💘 (IntersectionObserver)

이전 글에서 마우스를 호버하면 카드가 뒤집어지는 애니메이션을 구현했는데, 추가로 구현할 부분이 생겼습니다.

바로 모바일에서는 스크롤하면 카드가 뒤집어지게 하는 것이었습니다. 이 글에서는 꼭 모바일은 아니고, 스크롤 하면 카드가 flip 애니메이션 효과를 구현해보겠습니다.

IntersectionObserver라는 걸 활용해서 하는데 이것도 재미있습니다 😀

예제 코드 🌸🖥️

See the Pen Scroll card flip by Seoin (@tjdls111) on CodePen.

 

설명 🤗💕

Intersection Observer Api를 이용했는데, 이것은 타겟 요소와 상위 요소가 겹치는 부분을 관찰해줍니다. 그리고 페이지가 스크롤되다가, 타겟 요소가 등장하면 원하는 콜백 함수를 실행할 수 있습니다.

 

핵심 코드들만 설명해보겠습니다~ (다른 코드들은 이전 포스팅에서 다뤘습니다 ㅎㅎ)

   const cards = document.querySelectorAll('.flip-card')

  cards.forEach(card => {
    observer.observe(card)
  })

일단은 flip-card라는 클래스 이름을 가진 요소들을 모두 골랐습니다. 각각의 요소를 intersection observer api를 이용해서 관찰했죠.

observer는 뭘까요? 그게 바로 이 글의 핵심인데요. 이제부터 Intersection Observer Api 를 사용하는 코드를 다루겠습니다.

const observer = new IntersectionObserver(
    entries => {
      entries.forEach(entry => {
        if (entry.intersectionRatio >= 0.25) 
        {   
        	entry.target.classList.add('fliped') 
        } 
        else {   
        	entry.target.classList.remove('fliped') 
        }
      })
    },
    { threshold: [0.25] },
  )

일단 IntersectionObserver 생성자로 observer라는 상수에 할당했습니다.

저는 타켓 요소가 0.25만큼 보였을 때 콜백 함수를 실행하고 싶었어요. 즉 스크롤을 내리다가 요소가 0.25 보이기 시작할 때 카드가 앞->뒤로 뒤집히고, 스크롤을 올리다가 요소의 0.25 부근만 남은 순간을 지나면 카드가 뒤->앞으로 뒤집히는 것을 원했어요. 이때 사용할 수 있는 속성이 'threshold'입니다. threshold로 정한 비율만큼 요소가 보일 때 콜백을 실행해주는데요. 0부터 1까지 숫자를 입력할 수 있고, 숫자 리스트로 쓰면 됩니다.

타겟 요소가 threshold로 정한 비율만큼 등장하면 콜백함수가 실행되는데, 그 콜백함수는 IntersectionObserverEntry 객체 리스트를 받습니다. 

콘솔 로그로 보니 이렇게 리스트로 오더라고요.

타겟 객체가 보인 비율이 0.25 이상이면, 요소가 등장하는 것이라서 fliped 라는 클래스를 추가했습니다.  미만이라면, 요소가 사라지는 것이라서 fliped 클래스를 제거했습니다.

사실 우연히 찾은 야매(?) 방법인데 이 방법으로 스크롤 내리는 중인지 올리는 중인지 판단되는 게 신기하네요.

chatGPT에게 되는 이유를 물어봤더니 이렇게 말했습니다.

'IntersectionObserver의 threshold 옵션에 [0.25]를 설정했기 때문에, 교차 비율이 0.25가 되는 순간 콜백 함수가 호출됩니다. 그래서 이 조건문이 참일 때, 교차 비율이 0.25 이상으로 증가한 것으로 판단하여 스크롤을 내리는 중이라고 생각할 수 있습니다.' 

하지만 이 방법은 왠지.. 찜찜하니.. 정확하게 하려면, 이전 교차 비율과 비교해서 판단하는 게 좋을 것 같습니다 ~ 

 

아래 CSS 코드로 fliped 클래스가 있을 때, 앞->뒤로 뒤집어지게 했습니다.

.fliped .flip-card-inner {
  transform: rotateY(180deg);
}

 

아래 Mdn 문서에 자세히 쓰여있고 예제도 볼 수 있습니다 ~ 

 

참고 자료 📚📖

https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API

Intersection Observer API - Web API | MDN