[javascript] 자바스크립트로 페이드 인/아웃 애니메이션을 구현하는 가장 간단한 방법

14 Dec 2023

javascript

웹 페이지에 요소를 부드럽게 나타내거나 사라지게 만드는 페이드 인/아웃 애니메이션을 자바스크립트로 구현하는 것은 간단합니다. 아래에 이를 실현하는 가장 간단한 방법을 제시합니다.

HTML

HTML 파일에는 페이드 인/아웃 애니메이션을 적용할 요소가 필요합니다. 예를 들어, <div> 요소를 사용해보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Fade Animation</title>
</head>
<body>
  <div id="fadeInOutElement">내용</div>
  <script src="script.js"></script>
</body>
</html>

CSS

이제 styles.css 파일에서 해당 요소를 초기에 숨기도록 합니다.

#fadeInOutElement {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

JavaScript

마지막으로, script.js 파일에 페이드 인/아웃 애니메이션의 동작을 추가합니다.

var element = document.getElementById('fadeInOutElement');

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

function fadeOut() {
  element.style.opacity = '0';
}

// fadeIn();  // 페이지 로드 후 자동으로 페이드 인되도록 하려면 주석 해제

위의 예시에서는 요소를 부드럽게 나타내거나 사라지게 만드는 간단한 방법을 제시했습니다. 요소가 처음부터 보이도록 하려면 fadeIn 함수를 즉시 실행하도록 주석 처리를 해제할 수 있습니다.

이제 당신도 자바스크립트를 사용하여 페이드 인/아웃 애니메이션을 쉽게 구현할 수 있습니다!