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

14 Dec 2023

javascript

웹 개발에서 애니메이션은 사용자 경험을 향상시키는 데 중요한 역할을 합니다. 그림자 효과는 요소가 부드럽게 나타나거나 사라지는 페이드 인/아웃 애니메이션을 구현할 때 매우 유용합니다. 자바스크립트로 이러한 그림자 효과를 쉽게 적용할 수 있습니다. 이번 포스트에서는 자바스크립트와 CSS를 활용하여 그림자 효과를 생성하는 방법을 알아보겠습니다.

HTML 구조

먼저 HTML에서 그림자 효과를 적용할 요소를 생성합니다. 아래는 예시로 div 요소를 사용하는 간단한 구조입니다.

<div id="box" class="box"></div>
<button onclick="fadeIn()">Fade In</button>
<button onclick="fadeOut()">Fade Out</button>

CSS 스타일

다음으로 CSS를 사용하여 요소에 초기 스타일을 정의합니다. 그림자 효과를 위해 box-shadow 속성을 이용합니다.

.box {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  display: none; /* 초기에는 숨겨진 상태로 설정 */
}

자바스크립트로 애니메이션 적용하기

이제 자바스크립트로 애니메이션을 적용하는 함수를 작성합니다. 아래는 순수 자바스크립트로 페이드 인/아웃 효과를 적용하는 예시 코드입니다.

function fadeIn() {
  var box = document.getElementById('box');
  box.style.opacity = 0;
  box.style.display = 'block';

  var tick = function() {
    box.style.opacity = +box.style.opacity + 0.1;

    if (+box.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };

  tick();
}

function fadeOut() {
  var box = document.getElementById('box');
  box.style.opacity = 1;

  var tick = function() {
    box.style.opacity = +box.style.opacity - 0.1;

    if (+box.style.opacity > 0) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    } else {
      box.style.display = 'none';
    }
  };

  tick();
}

위 코드는 fadeIn 함수와 fadeOut 함수를 통해 그림자 박스를 부드럽게 나타나거나 사라지도록 설정합니다.

요약

자바스크립트를 사용하여 그림자 효과를 쉽게 적용할 수 있습니다. 애니메이션을 추가하여 웹사이트나 웹 애플리케이션의 사용자 경험을 더욱 향상시킬 수 있습니다. 이를 응용하여 다양한 요소에 페이드 인/아웃 효과를 적용해 보세요!