이번에는 자바스크립트를 사용하여 간단한 페이드 인/아웃 애니메이션을 적용해 메뉴에 효과를 줄 수 있는 방법에 대해 알아보겠습니다.

목표

우리의 목표는 마우스를 메뉴 항목 위로 가져갔을 때 페이드 인 애니메이션을 통해 메뉴 항목을 부드럽게 나타내고, 마우스를 치우면 페이드 아웃 애니메이션을 통해 메뉴 항목을 부드럽게 사라지게 하는 것입니다.

HTML

우선, HTML에는 효과를 적용할 메뉴 항목들을 감싸는 div 요소와 각각의 메뉴 항목이 포함된 div 요소가 필요합니다. 예를 들어:

<div id="menu">
  <div class="menu-item">메뉴 1</div>
  <div class="menu-item">메뉴 2</div>
  <div class="menu-item">메뉴 3</div>
</div>

CSS

메뉴 항목의 초기 상태를 설정하기 위해 CSS를 이용해 각 메뉴 항목을 숨기거나 투명하게 만들어 줍니다.

.menu-item {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.menu-item:hover {
  opacity: 1;
}

JavaScript

마지막으로, 자바스크립트를 사용하여 페이드 인/아웃 효과를 추가합니다.

const menuItems = document.querySelectorAll('.menu-item');

menuItems.forEach((item) => {
  item.addEventListener('mouseenter', () => {
    item.style.opacity = 1;
  });

  item.addEventListener('mouseleave', () => {
    item.style.opacity = 0;
  });
});

이제 마우스를 각 메뉴 항목 위에 가져가면 페이드 인 애니메이션이 동작하고, 마우스를 치우면 페이드 아웃 애니메이션이 적용되는 것을 볼 수 있습니다.

위의 예시는 매우 간단한 페이드 인/아웃 효과를 구현한 것입니다. 더 다양하고 복잡한 애니메이션을 적용하고 싶은 경우에는 CSS 애니메이션 또는 라이브러리를 사용할 수도 있습니다.

결론

자바스크립트를 사용하여 페이드 인/아웃 애니메이션을 활용하여 메뉴 항목에 효과를 적용하는 방법을 살펴보았습니다. 이를 활용하여 사용자 경험을 향상시키거나 웹 페이지의 시각적 효과를 더욱 풍부하게 만들 수 있습니다.