스크롤 내리면 애니메이션 실행하기 적용 방법 [html + JavaScript]

mooyou 2025. 5. 25. 22:45

728x90

SMALL

웹사이트에서 스크롤을 내릴 때 요소가 자연스럽게 등장하는 효과 이 기능은 단순한 css와 javaScript만으로도 쉽게 구현할 수 있습니다. IntersectionObserver API를 활용하여 스크롤 애니메이션 효과를 만들어보겠습니다.

구현 목표

스크롤을 아래로 내리면 특정 박스가 페이드 인(Fade In) + 위로 올라오는 애니메이션을 실행
애니메이션은 한 번만 실행

전체코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>스크롤 애니메이션 예제</title>
  <style>
    body {
      margin: 0;
      font-family: sans-serif;
    }

    .spacer {
      height: 100vh;
      background: #f0f0f0;
    }

    .box {
      opacity: 0;
      transform: translateY(50px);
      transition: all 0.6s ease;
      width: 200px;
      margin: 100px auto;
      padding: 50px;
      background: #4caf50;
      color: white;
      text-align: center;
      border-radius: 10px;
      font-size: 20px;
    }

    .box.active {
      opacity: 1;
      transform: translateY(0);
    }
  </style>
</head>
<body>

  <div class="spacer">스크롤 다운 ↓</div>

  <div class="box" id="target">애니메이션 실행!</div>

  <div class="spacer"></div>

  <script>
    const target = document.querySelector('#target');

    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('active');
          observer.unobserve(entry.target); // 한 번만 실행되도록 감시 해제
        }
      });
    }, {
      threshold: 0.3 // 요소가 30% 이상 화면에 들어오면 실행
    });

    observer.observe(target);
  </script>
</body>
</html>

코드 설명

css설명

.box {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease;
}
.box.active {
  opacity: 1;
  transform: translateY(0);
}

box는 처음에는 opacity:0 즉 보이지 않고 Y축으로 50px 아래에 위치
.active클래스가 붙으면 0.6초 동안 opacity:1로 천천히 나타나면서 제자리로 올라옴

JavaScript 설명

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('active');
      observer.unobserve(entry.target);
    }
  });
}, {
  threshold: 0.3
});

IntersectionObserver는 특정 요소가 뷰포트에 30% 이상 보이는지 감지
감지되면 .active클래스를 추가해서 애니메이션을 실행
oberserver.unobserve()로 해당 요소는 더 이상 갑지하지 않도로고 설정 -> 애니메이션은 한 번만 실행됨

확장 팁

여러 개 .box 요소에 적용하려면 querySelectorAll로 여러 요소를 선택한 후 반복(forEach)하면 된다.
threshold를 0.1이나 1.0으로 조절해 보여지는 비율을 조정할 수 있다.
애니메이션 스타일도 scale, rotate, fade, slide등 다양하게 응용 가능

스크롤 다운 ↓

애니메이션 실행!

728x90

LIST

저작자표시 비영리 변경금지 (새창열림)