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

14 Dec 2023

javascript

웹 개발에서 이미지 요소에 효과적으로 애니메이션을 적용하려면 자바스크립트를 사용할 수 있습니다. 특히, 페이드 인/아웃 효과를 부드럽게 적용하는 것은 사용자 경험을 향상시키는 데 도움이 됩니다.

이번에는 HTML, CSS 및 자바스크립트를 사용하여 이미지를 페이드 인/아웃하는 간단한 예제를 살펴보겠습니다.

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="image-container">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <button onclick="fadeIn()">Fade In</button>
  <button onclick="fadeOut()">Fade Out</button>
  <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.image-container {
  position: relative;
  width: 300px; /* 이미지의 원하는 크기로 지정 */
  height: 200px; /* 이미지의 원하는 크기로 지정 */
  overflow: hidden;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease; /* 페이드 인/아웃 애니메이션 적용 */
}

JavaScript (script.js)

function fadeIn() {
  const image = document.querySelector('.image-container img');
  image.style.opacity = '1';
}

function fadeOut() {
  const image = document.querySelector('.image-container img');
  image.style.opacity = '0';
}

이것으로 이미지 요소에 페이드 인/아웃 효과를 부드럽게 적용할 수 있습니다. 이 예제를 확장하여 더 다채로운 애니메이션 효과를 적용하는 등의 작업을 할 수 있습니다.

HTML

CSS (styles.css)

JavaScript (script.js)

참고 자료