이번 포스트에서는 자바스크립트를 활용하여 페이드 인/아웃 애니메이션을 갖는 버튼 요소를 만드는 방법에 대해 알아보겠습니다.

요구 사항

우리는 버튼을 클릭했을 때 해당 버튼이 부드럽게 나타나거나 사라지는 페이드 인/아웃 효과를 갖도록 구현하고 싶습니다.

구현

HTML

<button id="fadeButton">Click Me</button>

버튼 요소에 fadeButton이라는 ID를 할당하였습니다.

CSS

button {
  opacity: 1;
  transition: opacity 0.5s ease;
}

.hidden {
  opacity: 0;
  pointer-events: none;
}

버튼에는 초기에 opacity: 1 속성을 갖게 하고, hidden 클래스를 통해 opacity: 0으로 바뀌도록 설정했습니다.

JavaScript

const fadeButton = document.getElementById('fadeButton');

fadeButton.addEventListener('click', function() {
  fadeButton.classList.toggle('hidden');
});

우리는 fadeButton을 대상으로 ‘click’ 이벤트를 리스닝하고, 클릭 시 hidden 클래스를 토글하여 버튼을 페이드 인/아웃하였습니다.

결론

우리는 자바스크립트를 사용하여 페이드 인/아웃 애니메이션을 적용한 버튼 요소를 만들었습니다. 이를 통해 사용자와의 인터랙션을 부드럽게 만들 수 있고, UI/UX를 향상시킬 수 있는 효과적인 방법임을 확인하였습니다.

이상으로, 자바스크립트를 이용한 페이드 인/아웃 애니메이션 구현에 대한 포스트를 마치도록 하겠습니다.

CSS Transitions - CSS 전이에 대한 참고 문서 MDN Web Docs - Element.classList - MDN 웹 문서의 Element.classList에 관한 내용