이번에는 자바스크립트를 사용하여 HTML 요소를 서서히 나타내는 페이드 인 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

HTML 구조

우선, 페이드 인 애니메이션을 적용할 HTML 요소를 만들어야 합니다. 예를 들어, <div> 요소 하나를 추가하겠습니다.

<div id="fadeInElement">
  이 요소가 서서히 나타납니다.
</div>

CSS 스타일

해당 요소를 초기에는 보이지 않도록 CSS로 처리합니다.

#fadeInElement {
  opacity: 0;
  transition: opacity 2s; /* 2초 동안의 트랜지션 효과 설정 */
}

자바스크립트로 페이드 인 애니메이션 구현

이제 자바스크립트를 사용하여 해당 요소를 서서히 나타나게 만들어보겠습니다.

window.onload = function() {
  var element = document.getElementById('fadeInElement');
  element.style.opacity = 1;
}

이렇게 하면 페이지가 로드될 때 <div> 요소가 서서히 나타나는 페이드 인 효과가 적용됩니다.

위 예제는 간단한 페이드 인 효과를 보여주기 위한 것이며, 실제 프로젝트에서는 CSS 클래스를 토글하거나 자바스크립트 라이브러리를 사용하여 더 다양하고 복잡한 애니메이션을 구현할 수 있습니다.

이렇게 간단한 방법으로 HTML, CSS 및 자바스크립트를 사용하여 요소를 서서히 나타내는 페이드 인 애니메이션을 구현할 수 있습니다.

참고 자료:

MDN Web Docs - Opacity MDN Web Docs - CSS Transitions