[javascript] 자바스크립트로 페이드 인/아웃 애니메이션을 적용할 수 있는 배경 이미지

14 Dec 2023

javascript

웹 개발에서 배경 이미지에 페이드 인/아웃 효과를 적용하고 싶다면 자바스크립트를 사용하여 이를 달성할 수 있습니다. 이러한 애니메이션은 웹 페이지에 동적이고 시각적으로 매력적인 요소를 추가할 수 있습니다. 이번 포스트에서는 자바스크립트로 배경 이미지에 페이드 인/아웃 애니메이션을 만드는 방법을 살펴보겠습니다.

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="background-image"></div>
  <script src="script.js"></script>
</body>
</html>

CSS 스타일링

다음으로, CSS를 사용하여 배경 이미지의 스타일을 설정합니다.

body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.background-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('background.jpg');
  background-size: cover;
  z-index: -1;
  animation: fade 5s infinite alternate;
}

@keyframes fade {
  0% { opacity: 1; }
  100% { opacity: 0.5; }
}

자바스크립트 애니메이션

마지막으로, 자바스크립트를 사용하여 애니메이션을 제어합니다.

// script.js
const background = document.querySelector('.background-image');

// 임의의 이벤트 또는 시간 간격에 따라 배경 이미지의 투명도를 조절
setInterval(() => {
  if (background.style.opacity === '0.5') {
    background.style.opacity = '1';
  } else {
    background.style.opacity = '0.5';
  }
}, 5000); // 5초마다 변경

이제 자바스크립트로 배경 이미지에 페이드 인/아웃 애니메이션을 만들었습니다. 이를 웹 페이지에 적용하여 동적이고 매력적인 시각적 효과를 추가할 수 있습니다.

참고: 본 포스트에서는 사용자가 웹 페이지를 스크롤할 때 배경 이미지를 페이드 인/아웃하는 애니메이션을 구현한 예시를 제공했습니다.

HTML 구조

CSS 스타일링

자바스크립트 애니메이션

참고 자료