[javascript] 자바스크립트로 페이드 인 애니메이션 구현하는 방법

14 Dec 2023

웹 페이지에 요소가 부드럽게 나타나는 효과를 주고 싶을 때 자바스크립트를 사용하여 페이드 인 애니메이션을 구현할 수 있습니다. 이 포스트에서는 간단한 예제를 통해 자바스크립트로 페이드 인 애니메이션을 만드는 방법을 알아보겠습니다.

HTML 구조 설정하기

가장 먼저 HTML 파일에 애니메이션을 적용할 요소를 만들어야 합니다. 아래는 애니메이션을 적용할 div 요소의 예시입니다.

<div id="element" class="fade-in">페이드 인 애니메이션 예제</div>

해당 요소의 초기 상태를 CSS로 설정해야 합니다. 애니메이션이 시작될 때 투명도가 0이 되도록 설정하고, 페이드 인 애니메이션이 끝나면 표시되도록 투명도를 1로 만듭니다.

#element {
  opacity: 0;
  transition: opacity 1s ease;
}

이제 자바스크립트를 사용하여 페이드 인 애니메이션을 트리거할 수 있습니다. 아래는 fadeIn 함수로 애니메이션을 트리거하는 예시입니다.

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

애니메이션이 트리거되는 조건을 정의할 수도 있습니다. 예를 들어, 스크롤 이벤트가 발생한 경우에 애니메이션이 트리거되도록 설정할 수 있습니다.

window.addEventListener('scroll', function() {
  if (window.scrollY > 500) {
    fadeIn();
  }
});

위의 예제 코드를 적절히 조합하여 페이드 인 애니메이션을 구현할 수 있습니다. 원하는 요소에 이 애니메이션을 적용하여 웹 페이지를 더 생동감 있게 만들어보세요!