[javascript] 자바스크립트로 페이드 인/아웃 애니메이션을 적용할 때 사용하는 함수

14 Dec 2023

javascript

웹 애플리케이션에서 요소를 부드럽게 나타내거나 사라지게 만들기 위해 자바스크립트로 페이드 인/아웃 애니메이션을 적용할 수 있습니다. 이를 위해 다음과 같이 사용자 정의 함수를 작성할 수 있습니다.

function fadeIn(element, duration) {
  element.style.opacity = 0;

  var startTime = performance.now();

  function update() {
    var elapsed = performance.now() - startTime;
    element.style.opacity = elapsed / duration;
    if (elapsed < duration) {
      requestAnimationFrame(update);
    }
  }

  requestAnimationFrame(update);
}

function fadeOut(element, duration) {
  var startTime = performance.now();
  var startOpacity = parseFloat(window.getComputedStyle(element).opacity);

  function update() {
    var elapsed = performance.now() - startTime;
    element.style.opacity = startOpacity * (1 - elapsed / duration);
    
    if (elapsed < duration) {
      requestAnimationFrame(update);
    }
  }

  requestAnimationFrame(update);
}

위의 코드는 fadeIn과 fadeOut 함수를 정의하고 있습니다. fadeIn 함수는 요소를 서서히 나타나게 하고, fadeOut 함수는 요소를 서서히 사라지게 만듭니다. 두 함수는 요소와 지속 시간을 매개변수로 받아 해당 애니메이션을 적용합니다.

이 함수들을 활용하여 웹 애플리케이션에서 부드러운 페이드 인/아웃 효과를 추가할 수 있습니다.

참고 문헌: