[javascript] 자바스크립트로 투명도 조절하여 페이드 인/아웃 효과 만들기

14 Dec 2023

javascript

자바스크립트를 사용하여 HTML 요소의 투명도를 조절하여 페이드 인/아웃 효과를 만들 수 있습니다. 이를 위해 “opacity” 속성을 사용하여 HTML 요소의 투명도를 0에서 1 사이의 값으로 설정하고, “setInterval()” 함수를 사용하여 일정 간격으로 투명도를 변경합니다.

HTML 요소 추가

<div id="fade-box" style="width: 100px; height: 100px; background-color: black;"></div>
<button onclick="fadeIn()">Fade In</button>
<button onclick="fadeOut()">Fade Out</button>

위 코드는 페이드 인/아웃 효과를 적용할 div 요소와 해당 효과를 트리거하는 두 개의 버튼을 포함하고 있습니다.

자바스크립트로 페이드 인/아웃 효과 구현

function fadeIn() {
  var element = document.getElementById("fade-box");
  var op = 0.1;  // 초기 투명도
  element.style.opacity = op;
  var timer = setInterval(function () {
    if (op >= 1){
      clearInterval(timer);
    }
    element.style.opacity = op;
    op += op * 0.1;
  }, 50); // 변화 간격(ms)
}

function fadeOut() {
  var element = document.getElementById("fade-box");
  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); // 변화 간격(ms)
}

위의 코드는 “fadeIn()” 및 “fadeOut()” 함수를 사용하여 투명도를 변경하여 페이드 인/아웃 효과를 적용합니다.

이 코드를 사용하여 HTML 요소에 페이드 인/아웃 효과를 추가할 수 있습니다.