[javascript] 자바스크립트로 페이드 아웃 애니메이션을 활용한 이미지 전환 효과

14 Dec 2023

javascript

이미지 간 부드러운 전환 효과를 주기 위해 자바스크립트로 페이드 아웃 애니메이션을 활용하는 방법을 알아보겠습니다.

필요한 HTML 요소 준비

우선, 이미지 전환 효과를 적용할 이미지를 담을 HTML 요소를 준비합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Fade Out 애니메이션 이미지 전환</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="image-container">
    <img src="image1.jpg" id="image1" class="active">
    <img src="image2.jpg" id="image2">
  </div>

  <button onclick="fadeOut()">이미지 전환</button>

  <script src="script.js"></script>
</body>
</html>

CSS 스타일링

이미지 간 페이드 아웃 전환 효과를 적용하기 위해 CSS를 사용하여 요소들을 스타일링합니다.

.image-container {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transition: opacity 1s;
  z-index: 1;
}

.image-container img:not(.active) {
  opacity: 0;
}

자바스크립트로 페이드 아웃 애니메이션 적용

이미지 전환 버튼을 클릭했을 때 자바스크립트로 페이드 아웃 애니메이션을 적용하여 이미지를 전환합니다.

function fadeOut() {
  const activeImage = document.querySelector('.image-container img.active');
  const nextImage = document.querySelector('.image-container img:not(.active)');

  activeImage.style.opacity = 0;

  setTimeout(() => {
    activeImage.classList.remove('active');
    activeImage.style.zIndex = -1;
    nextImage.style.zIndex = 1;
    nextImage.style.opacity = 1;
    nextImage.classList.add('active');
  }, 1000);
}

이제 이미지 전환 버튼을 클릭하면 페이드 아웃 애니메이션이 적용되면서 이미지가 부드럽게 전환됩니다.

이렇게 하면 자바스크립트를 사용하여 이미지 간 페이드 아웃 애니메이션을 적용하여 부드럽게 이미지를 전환할 수 있습니다.

참고문헌: