IntersectionObserver를 사용한 스크롤 인터랙션 및 이미지 표시

이 블로그 포스트에서는 IntersectionObserver API를 사용하여 스크롤 시 이미지가 나타나는 인터랙티브 웹 페이지를 만드는 과정을 안내합니다. 이 기능은 웹 페이지의 시각적 매력을 높이고 사용자의 참여를 유도하는 데 도움이 됩니다. HTML, CSS, 그리고 JavaScript를 사용하여 이 효과를 구현할 것입니다.

HTML 구조

먼저, 기본 HTML 구조를 설정합니다. 헤더 섹션에는 사용자에게 스크롤을 유도하는 타이틀이 있고, 스크롤 시 표시될 이미지를 포함한 포스터 섹션이 있습니다.

<section class="header hidden-area">
  <h1 class="header__title">
    <div>SCROLL DOWN</div>
    <div>TO DISPLAY IMAGES</div>
  </h1>
</section>
<section class="poster hidden-area">
  <div class="poster__parallax">
    <div id="poster-image_wrapper_1" class="poster-image_wrapper">
      <img id="poster-image_1" src="https://images.unsplash.com/photo-1708958151986-2b032fde35ce?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwxNHx8fGVufDB8fHx8fA%3D%3D" alt="" class="poster-image">
    </div>
    <div id="poster-image_wrapper_2" class="poster-image_wrapper">
      <img id="poster-image_2" src="https://images.unsplash.com/photo-1721191149571-d09f621d59ae?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwxOHx8fGVufDB8fHx8fA%3D%3D" alt="" class="poster-image">
    </div>
    <div id="poster-image_wrapper_3" class="poster-image_wrapper">
      <img id="poster-image_3" src="https://images.unsplash.com/photo-1721041068512-baf0fbbf450a?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw0fHx8ZW58MHx8fHx8" alt="" class="poster-image">
    </div>
  </div>
</section>

CSS 스타일링

다음으로, 요소들을 스타일링합니다. 배경색을 설정하고, 헤더와 포스터 섹션을 스타일링합니다.

body {
  background-color: #1e4029;
  font-family: sans-serif;
}

.shown-area {
  display: none;
  opacity: 1;
}

.hidden-area {
  display: block;
  opacity: 1;
}

.header {
  position: relative;
  height: 100vh;
  min-height: 1048px;
  width: 100%;
  overflow-x: hidden;
  overflow: hidden;
}

.header__title {
  position: absolute;
  top: 30vh;
  width: 100%;
  font-size: 7.5rem;
  line-height: 8.625rem;
  color: rgb(213, 165, 78);
  text-align: center;
  font-weight: bold;
}

.poster__parallax {
  position: relative;
  height: 1500px;
}

.poster-image {
  position: absolute;
  opacity: 0;
}

.poster-image_wrapper {
  position: absolute;
  width: 100%;
}

#poster-image_wrapper_1 {
  right: 0;
  height: 100%;
}

#poster-image_wrapper_2 {
  top: 10%;
  left: 5%;
  height: 667px;
}

#poster-image_wrapper_3 {
  top: 35%;
  right: 0;
  height: 772px;
}

#poster-image_1 {
  right: 0;
  width: 1127px;
}

#poster-image_2 {
  height: 100%;
}

#poster-image_3 {
  right: 0;
  height: 100%;
}

@keyframes appear-right-to-left {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes appear-left-to-right {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes appear-bottom-to-top {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.poster-image_state_visible #poster-image_1 {
  animation: appear-right-to-left .75s ease;
  animation-fill-mode: forwards;
}

.poster-image_state_visible #poster-image_2 {
  animation: appear-left-to-right .75s ease;
  animation-fill-mode: forwards;
}

.poster-image_state_visible #poster-image_3 {
  animation: appear-bottom-to-top .75s ease;
  animation-fill-mode: forwards;
}

JavaScript로 인터랙션 구현

마지막으로, IntersectionObserver를 사용하여 이미지가 뷰포트에 들어올 때 애니메이션을 적용하는 JavaScript 코드를 추가합니다.

const header = document.querySelector(".header");

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("poster-image_state_visible");
    }
  });
}, { threshold: 0.2 });

document.querySelectorAll(".poster-image_wrapper").forEach((poster) => {
  observer.observe(poster);
});

설명

1. HTML 구조 설정: 헤더 섹션에는 스크롤을 유도하는 메시지가 있고, 포스터 섹션에는 스크롤 시 나타날 이미지들이 포함되어 있습니다.
2. CSS 스타일링: 배경색을 설정하고, 각 섹션과 이미지의 스타일을 지정합니다. 애니메이션을 정의하여 이미지가 뷰포트에 들어올 때 부드럽게 나타나도록 합니다.
3. JavaScript 인터랙션: IntersectionObserver API를 사용하여 이미지가 뷰포트에 들어올 때 해당 이미지에 애니메이션 클래스를 추가합니다.
   • IntersectionObserver는 특정 요소가 뷰포트에 나타날 때 콜백 함수를 호출합니다.
   • threshold 옵션은 요소가 뷰포트에 20% 이상 보일 때 콜백을 호출하도록 설정합니다.
   • 이미지 래퍼 요소들에 대해 observer.observe를 호출하여 각 요소를 관찰합니다.

이 코드 조합은 사용자가 페이지를 스크롤할 때 이미지가 애니메이션과 함께 나타나는 동적인 사용자 경험을 제공합니다. IntersectionObserver API를 사용하여 성능을 최적화하고, 효율적으로 요소의 가시성을 감지할 수 있습니다.