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

14 Dec 2023

javascript

자바스크립트를 사용하여 텍스트 요소에 부드러운 페이드 인/아웃 효과를 적용하는 것은 웹사이트나 앱에서 시각적으로 흥미로운 효과를 만들어내는 좋은 방법입니다.

이를 위해서는 CSS와 자바스크립트를 조합하여 효과적으로 구현할 수 있습니다.

HTML 준비

우선 페이드 인/아웃 효과를 적용할 텍스트를 포함하는 HTML 요소를 작성해야 합니다.

<div id="fadingText">
  여기에 원하는 내용을 넣어주세요.
</div>

CSS 스타일링

이제 해당 HTML 요소에 적용할 CSS 스타일을 정의합니다.

#fadingText {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

자바스크립트 애니메이션 추가

이제 자바스크립트를 사용하여 텍스트 요소에 페이드 인/아웃 애니메이션을 추가해보겠습니다.

function fadeOut(element) {
  var op = 1; // 초기 투명도
  var timer = setInterval(function () {
    if (op <= 0.1){
      clearInterval(timer);
      element.style.display = 'none';
    }
    element.style.opacity = op;
    op -= op * 0.1;
  }, 50);
}

function fadeIn(element) {
  var op = 0.1;  // 초기 투명도
  element.style.display = 'block';
  var timer = setInterval(function () {
    if (op >= 1){
      clearInterval(timer);
    }
    element.style.opacity = op;
    op += op * 0.1;
  }, 50);
}

// 사용 예시
var fadingText = document.getElementById('fadingText');

// 나타나게 하기
fadeIn(fadingText);

// 사라지게 하기
fadeOut(fadingText);

이것으로 자바스크립트를 사용하여 텍스트 요소에 페이드 인/아웃 애니메이션을 적용하는 방법을 살펴보았습니다. 이러한 효과를 통해 사용자들은 더욱 흥미를 갖게 되고, 웹사이트나 앱이 더욱 동적이고 매력적으로 느껴지게 될 것입니다.

참고 자료: