[javascript] 자바스크립트로 페이드 인/아웃 애니메이션을 적용할 수 있는 색상효과

14 Dec 2023

javascript

웹 페이지에 동적이고 매력적인 사용자 경험을 제공하기 위해 자바스크립트를 활용하는 것이 중요합니다. 여기서는 자바스크립트를 사용하여 페이드 인/아웃 애니메이션을 적용하여 색상효과를 만드는 방법에 대해 알아봅니다.

필요한 기술

HTML
CSS
JavaScript

단계별 가이드

1. HTML 구조 설정

먼저, 다음과 같이 간단한 HTML 구조를 설정합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Fade In/Out Animation</title>
</head>
<body>
  <div class="box" id="colorBox"></div>
  <button onclick="fadeIn()">Fade In</button>
  <button onclick="fadeOut()">Fade Out</button>
  <script src="script.js"></script>
</body>
</html>

2. CSS 스타일 설정

다음으로, CSS를 사용하여 상자(.box) 스타일을 지정합니다.

.box {
  width: 200px;
  height: 200px;
  background-color: #ff0000;
  opacity: 0; /* 처음에는 투명 상태로 설정 */
  transition: opacity 0.5s ease; /* Fade 애니메이션 설정 */
}

3. 자바스크립트로 효과 추가

마지막으로, 자바스크립트를 사용하여 페이드 인/아웃 효과를 추가합니다.

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

function fadeOut() {
  var element = document.getElementById("colorBox");
  element.style.opacity = "0";
}

위의 코드는 버튼을 클릭할 때 해당 fadeIn 또는 fadeOut 함수를 호출하여 상자를 페이드 인/아웃하도록 만듭니다.

마치며

이제 단 몇 줄의 코드로 자바스크립트를 사용하여 페이드 인/아웃 애니메이션을 추가하여 색상효과를 만들었습니다. 이러한 효과를 사용하면 웹 페이지의 시각적 품질을 향상시킬 수 있습니다. 또한, 이것은 사용자가 상호작용하는 동안 더욱 흥미로운 경험을 제공할 수 있습니다.

참고: MDN Web Docs - Opacity, MDN Web Docs - Transition