자바스크립트 애니메이션 프레임을 활용한 모달 창 애니메이션 만들기

18 Oct 2023

javascript

애니메이션은 웹 개발에서 사용되는 중요한 요소 중 하나입니다. 애니메이션은 사용자 경험을 향상시키고 웹 페이지의 시각적인 매력을 높여줍니다. 이번 튜토리얼에서는 자바스크립트의 애니메이션 프레임을 활용하여 모달 창에 애니메이션을 적용하는 방법에 대해 알아보겠습니다.

1. HTML 구조 설정하기

먼저, 모달 창을 구현하기 위해 필요한 HTML 구조를 설정해야 합니다. 기본적으로 다음과 같은 구조를 사용할 수 있습니다.

<div class="modal">
  <div class="modal-content">
    <!-- 모달 창 내용 -->
  </div>
  <button class="close-btn">닫기</button>
</div>

2. CSS 스타일링하기

모달 창에 애니메이션을 적용하기 위해 CSS 스타일을 설정해야 합니다. 다음은 기본적인 스타일링 예시입니다.

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  align-items: center;
  justify-content: center;
}

.modal-content {
  width: 400px;
  height: 300px;
  background-color: white;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
}

3. 자바스크립트로 애니메이션 적용하기

애니메이션 프레임을 활용하여 모달 창에 애니메이션을 적용하는 방법은 다음과 같습니다.

// 모달 열기 함수
function openModal() {
  const modal = document.querySelector('.modal');
  modal.style.display = 'flex';

  requestAnimationFrame(function animateModal() {
    modal.style.opacity += 0.05;

    if (modal.style.opacity < 1) {
      requestAnimationFrame(animateModal);
    }
  });
}

// 모달 닫기 함수
function closeModal() {
  const modal = document.querySelector('.modal');

  requestAnimationFrame(function animateModal() {
    modal.style.opacity -= 0.05;

    if (modal.style.opacity > 0) {
      requestAnimationFrame(animateModal);
    } else {
      modal.style.display = 'none';
    }
  });
}

// 모달 열기 버튼 클릭 이벤트 핸들러
const openBtn = document.querySelector('.open-btn');
openBtn.addEventListener('click', openModal);

// 모달 닫기 버튼 클릭 이벤트 핸들러
const closeBtn = document.querySelector('.close-btn');
closeBtn.addEventListener('click', closeModal);

마치며

이번 튜토리얼에서는 자바스크립트의 애니메이션 프레임을 활용하여 모달 창에 애니메이션을 적용하는 방법을 알아보았습니다. 이를 활용하여 웹 페이지 개발에서 다양한 애니메이션 효과를 구현할 수 있습니다. 이제 여러분은 자바스크립트로 모달 창에 애니메이션을 적용하는 방법에 대해 잘 알게 되었습니다.

더 많은 자바스크립트 애니메이션에 대한 자세한 내용은 W3Schools와 MDN Web Docs를 참고하시기 바랍니다.

#webdevelopment #javascript