스크롤 애니메이션 구현하기(Scroll-Triggered Animation with Scroll event, Intersection Observer)

 

스크롤에 따라 요소가 부드럽게 등장하는 애니메이션을 본적이 있으신가요?

이번 포스팅에서 자바스크립트로 스크롤 애니메이션을 구현해봅시다.

 

 

 

 

우선 HTML 마크업을 작성합시다

<div class="container">
  <article class="content">
    <h2 class="title">Hello, There!</h2>
    <p class="text"> Aspernatur, blanditiis consequatur! Accusamus nulla omnis maxime ea praesentium, magni, vel, molestias ducimus quibusdam voluptatibus qui corporis debitis repudiandae rerum voluptatum quod. Odit illum asperiores consequuntur iusto consectetur, cum voluptas!
      Quas asperiores, atque pariatur maxime quam, in et nostrum praesentium obcaecati illo temporibus! Aliquam necessitatibus voluptate earum dolorum blanditiis autem architecto, odit optio debitis natus dicta modi ut vel ducimus.</p>
  </article>
  <article class="content">
    <h2 class="title">Hello, There!</h2>
    <p class="text"> Aspernatur, blanditiis consequatur! Accusamus nulla omnis maxime ea praesentium, magni, vel, molestias ducimus quibusdam voluptatibus qui corporis debitis repudiandae rerum voluptatum quod. Odit illum asperiores consequuntur iusto consectetur, cum voluptas!
      Quas asperiores, atque pariatur maxime quam, in et nostrum praesentium obcaecati illo temporibus! Aliquam necessitatibus voluptate earum dolorum blanditiis autem architecto, odit optio debitis natus dicta modi ut vel ducimus.</p>
  </article>
  <article class="content">
    <h2 class="title">Hello, There!</h2>
    <p class="text"> Aspernatur, blanditiis consequatur! Accusamus nulla omnis maxime ea praesentium, magni, vel, molestias ducimus quibusdam voluptatibus qui corporis debitis repudiandae rerum voluptatum quod. Odit illum asperiores consequuntur iusto consectetur, cum voluptas!
      Quas asperiores, atque pariatur maxime quam, in et nostrum praesentium obcaecati illo temporibus! Aliquam necessitatibus voluptate earum dolorum blanditiis autem architecto, odit optio debitis natus dicta modi ut vel ducimus.</p>
  </article>
  <!-- other articles... -->
</div>

 

 

 

 

다음은 CSS 스타일입니다

뷰포트에 요소가 등장했을 때 show 클래스를 적용할 것입니다.

.content {
  max-width: 40rem;
}

.title {
  margin: 0 0 1rem;
  font-size: 2.5rem;
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.5s ease;
}

.text {
  margin: 0;
  font-size: 1.25rem;
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.5s 0.25s ease;
}

.content.show .title {
  opacity: 1;
  transform: translateY(0);
}

.content.show .text {
  opacity: 1;
  transform: translateY(0);
}

 

 

 

 

첫 번째 방법 : Scroll Event 로 구현하기

Scroll EventListner를 사용하는 방법입니다.

 

먼저, window.innerHeight를 사용해서 윈도우의 내부 높이를 가져옵니다.

그리고 getBoundingClientRect()를 사용해서 요소의 시작점을 찾아냅니다.

 

이 두 값을 활용해서 뷰포트에 요소가 등장했을 때 show 클래스를 추가하거나 제거합니다.

const contents = document.querySelectorAll('.content');

appear();

function appear() {
  const triggerBottom = (window.innerHeight / 5) * 4;

  if(contents){
    contents.forEach((content) => {
    const contentTop = content.getBoundingClientRect().top;

    if (contentTop < triggerBottom) {
      content.classList.add("show");
    } else {
      content.classList.remove("show");
    }
  });
  }
}

window.addEventListener("scroll", appear);

 

 

✨ 완성된 코드를 확인해보세요

See the Pen Scroll appear animation by cona-tus (@cona-tus) on CodePen.

 

 

 

 

 

 

두 번째 방법 : Intersection Observer 로 구현하기

스크롤 이벤트 리스너의 경우 브라우저마다 미세한 오차가 발생할 수도 있습니다.

이번엔 Intersection Observer라는 브라우저 기능을 사용해봅시다.

 

Intersection Observer를 사용하면 뷰포트에 요소가 보이는지 아닌지 쉽게 알 수 있습니다.

isIntersecting 상태를 이용해 요소가 화면에 보인다면, show 클래스를 활성화하고, 보이지 않는다면 클래스를 제거합니다. 간단하죠?

const contents = document.querySelectorAll(".content");

const options = {
  root: null,
  rootMargin: "0px",
  threshold: 0.3,
};

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("show");
    } else {
      entry.target.classList.remove("show");
    }
  });
}, options);

contents.forEach((content) => {
  observer.observe(content);
});

 

 

✨ 완성된 코드를 확인해보세요

See the Pen Scroll animation IntersectionObserver by cona-tus (@cona-tus) on CodePen.