[javascript] 자바스크립트로 요소를 서서히 사라지게 만드는 페이드 아웃 효과

14 Dec 2023

웹 페이지에서 요소를 부드럽게 숨기는 페이드 아웃 효과를 만들 수 있습니다. 이러한 효과는 사용자 경험을 향상시키고 페이지 전환을 부드럽게 만들어줍니다. 자바스크립트를 사용하여 이 효과를 구현할 수 있습니다.

HTML 구조

우선, 페이드 아웃 효과를 적용할 HTML 요소를 생성해야 합니다.

<div id="fadeOutElement">
  이 요소를 서서히 숨깁니다.
</div>

페이드 아웃 효과를 적용할 요소에 대해 CSS를 사용하여 초기 스타일을 설정합니다.

#fadeOutElement {
  opacity: 1;
  transition: opacity 1s ease;
}

자바스크립트 이벤트 핸들러를 이용하여 요소를 페이드 아웃합니다.

const fadeOutElement = document.getElementById('fadeOutElement');
fadeOutElement.addEventListener('click', function() {
  this.style.opacity = 0;
});

이제, 요소를 클릭할 때 해당 요소가 서서히 사라지는 페이드 아웃 효과가 적용됩니다.

이처럼 자바스크립트를 사용하여 요소를 서서히 사라지게 만드는 페이드 아웃 효과를 구현할 수 있습니다.

이러한 동적 효과는 사용자가 웹 사이트에서 상호작용함에 따라 요소가 부드럽게 변화함으로써 사용자 경험을 향상시킬 수 있습니다. 페이드 아웃 효과 및 다른 동적 효과를 통해 웹 페이지를 더 매력적으로 만들어보세요.