[javascript] 자바스크립트로 페이드 인/아웃 애니메이션을 적용하는 팁과 트릭

14 Dec 2023

javascript

웹 개발에서 페이지 요소들을 부드럽게 나타내거나 사라지도록 만드는 페이드 인/아웃 애니메이션은 유용하고 시각적으로 매력적입니다. 이제 자바스크립트를 사용하여 이러한 애니메이션을 만드는 몇 가지 유용한 팁과 트릭에 대해 알아보겠습니다.

페이드 인 애니메이션

일반적으로 페이드 인 애니메이션은 요소를 서서히 나타나게 하는 효과입니다. 이를 수행하려면 opacity 속성을 조절하여 요소를 투명에서 불투명으로 변화시키면 됩니다.

아래는 간단한 예제 코드입니다.

const element = document.getElementById('myElement');

function fadeIn(element) {
  let opacity = 0;
  const interval = setInterval(function() {
    if (opacity < 1) {
      opacity += 0.1;
      element.style.opacity = opacity;
    } else {
      clearInterval(interval);
    }
  }, 100);
}

fadeIn(element);

위 코드는 myElement라는 ID를 가진 요소를 서서히 나타나도록 만듭니다.

페이드 아웃 애니메이션

페이드 아웃 애니메이션은 요소를 서서히 사라지도록 만드는 효과입니다. 역시 opacity를 이용하여 이를 수행할 수 있습니다.

function fadeOut(element) {
  let opacity = 1;
  const interval = setInterval(function() {
    if (opacity > 0) {
      opacity -= 0.1;
      element.style.opacity = opacity;
    } else {
      clearInterval(interval);
    }
  }, 100);
}

fadeOut(element);

요소의 현재 투명도 확인

때로는 요소가 현재 얼마나 투명한지 확인하는 것이 유용합니다. 다음 코드는 이를 수행하는 방법을 보여줍니다.

function getOpacity(element) {
  const opacity = window.getComputedStyle(element).getPropertyValue('opacity');
  return opacity;
}

console.log(getOpacity(element));

요소의 투명도 설정

opacity를 직접 조절하는 대신 classList를 사용하여 투명도를 조절할 수도 있습니다. 아래 코드는 클래스를 추가하여 요소를 페이드 인/아웃하는 방법을 보여줍니다.

function fadeToggle(element) {
  element.classList.toggle('fade');
}

// CSS
/*
.fade {
  opacity: 0;
  transition: opacity 1s ease;
}
*/

위의 CSS는 요소에 fade 클래스가 추가될 때 투명도가 1초 동안 서서히 변하는 것을 나타냅니다.

페이드 인/아웃 애니메이션을 적용하는 주요 팁과 트릭은 여기까지입니다. 이러한 애니메이션을 사용하여 웹 페이지를 더욱 시각적으로 매력적으로 만들어보세요!

참고 자료: MDN Web Docs