자바스크립트를 사용하여 웹 요소를 부드럽게 사라지게 하는 페이드 아웃 애니메이션을 구현할 수 있습니다. 이 예제에서는 HTML, CSS 및 자바스크립트를 사용하여 텍스트 요소를 서서히 투명하게 만드는 방법을 살펴봅니다.

HTML

우선, 페이드 아웃 애니메이션을 적용할 HTML 요소를 만듭니다. 아래는 페이드 아웃 애니메이션을 적용할 div 요소의 예제입니다.

<div id="fadeOutDiv">
  페이드 아웃 애니메이션을 적용할 요소
</div>

CSS

페이드 아웃 애니메이션 효과를 정의하기 위해 CSS를 사용합니다. 페이드 아웃에 사용할 CSS 클래스 및 애니메이션 효과를 정의합니다.

.fadeOut {
  transition: opacity 1s ease;
  opacity: 1;
}

.fadeOut.fadeOutActive {
  opacity: 0;
}

자바스크립트

마지막으로, 자바스크립트를 사용하여 페이드 아웃 애니메이션을 적용합니다. 아래 코드는 요소에 페이드 아웃 애니메이션을 적용하는 방법을 보여줍니다.

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

function addFadeOutClass() {
  fadeOutDiv.classList.add('fadeOutActive');
}

// 일정 시간 후에 페이드 아웃 애니메이션 클래스 추가
setTimeout(addFadeOutClass, 1000);

위의 자바스크립트 코드는 요소에 fadeOutActive 클래스를 추가하여 투명도를 서서히 줄여 페이드 아웃 효과를 적용합니다.

이제 위의 코드를 참고하여 자바스크립트로 요소를 서서히 사라지게 하는 페이드 아웃 애니메이션을 만들어 볼 수 있습니다.

예제 참고: CSS Transition