이번 포스트에서는 자바스크립트를 사용하여 메뉴가 나타나고 사라지는 애니메이션 효과를 만들어보겠습니다.

1. HTML 구조

먼저, HTML 구조를 작성해야 합니다. 메뉴를 감싸는 div 요소와 메뉴 항목을 포함하는 ul 요소, 그리고 메뉴 항목들을 감싸는 li 요소를 작성합니다.

<div class="menu">
  <ul>
    <li>메뉴 항목 1</li>
    <li>메뉴 항목 2</li>
    <li>메뉴 항목 3</li>
  </ul>
</div>

2. CSS 스타일링

다음으로, CSS를 사용하여 메뉴의 초기 상태와 애니메이션 효과를 정의합니다. ul 요소를 초기에는 숨겨놓고, 나타내고자 할 때 효과를 주기 위해 transition 속성을 설정합니다.

.menu ul {
  display: none;
}

.menu.open ul {
  display: block;
}

.menu li {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.3s, transform 0.3s;
}

.menu.open li {
  opacity: 1;
  transform: none;
}

3. 자바스크립트 코드

이제 자바스크립트를 사용하여 메뉴가 나타나고 사라지는 애니메이션을 구현해보겠습니다.

const menu = document.querySelector('.menu');
const menuItems = document.querySelectorAll('.menu li');

menu.addEventListener('click', function() {
  menu.classList.toggle('open');
  
  menuItems.forEach(function(item, index) {
    if (menu.classList.contains('open')) {
      setTimeout(function() {
        item.style.transitionDelay = `${index * 0.1}s`;
        item.style.opacity = 1;
        item.style.transform = 'none';
      }, 300);
    } else {
      item.style.transitionDelay = '0s';
      item.style.opacity = 0;
      item.style.transform = 'translateX(-20px)';
    }
  });
});

위의 코드를 자세히 살펴보면, menu 요소에 클릭 이벤트 리스너를 등록하여 메뉴가 열리고 닫힐 때마다 open 클래스를 토글합니다. 그리고 메뉴 아이템들에 대해서도 애니메이션 효과를 적용하기 위해 각각의 요소에 대해 setTimeout 함수를 사용하여 순차적으로 변화를 주어 시간차로 나타나도록 구현합니다.

4. 결과 확인

이제 HTML 파일을 실행하여 메뉴가 정상적으로 나타나고 사라지는 애니메이션을 확인해보세요.

마치며

이번 포스트에서는 자바스크립트를 사용하여 메뉴가 나타나고 사라지는 애니메이션을 만드는 방법에 대해 알아보았습니다. 이를 기반으로 웹사이트나 앱에서 다양한 인터랙티브한 메뉴를 구현할 수 있습니다. 추가적으로 CSS 애니메이션과 트랜지션을 활용하면 더 다양한 효과를 구현할 수 있으니 참고해보세요.

#자바스크립트 #애니메이션