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

14 Dec 2023

javascript

웹 페이지에서 요소를 부드럽게 나타내거나 사라지도록 하려면 페이드 인/아웃 애니메이션을 적용할 수 있습니다. 이러한 효과는 사용자 경험을 향상시키고 웹 페이지의 시각적인 품질을 향상시킬 수 있습니다. 자바스크립트를 사용하여 스케일(scale) 효과를 적용하여 부드러운 페이드 인/아웃 애니메이션을 만들어 보겠습니다.

HTML

우선 HTML 파일에 애니메이션을 적용할 요소를 추가합니다.

<div id="element" class="hidden">애니메이션 효과를 적용할 요소</div>
<button onclick="fadeIn()">페이드 인</button>
<button onclick="fadeOut()">페이드 아웃</button>

CSS

애니메이션 요소의 초기 상태와 효과를 정의하기 위해 CSS를 추가합니다.

.hidden {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.5s, transform 0.5s;
}
.visible {
  opacity: 1;
  transform: scale(1);
}

JavaScript

이제 자바스크립트를 사용하여 페이드 인/아웃 애니메이션을 구현합니다.

function fadeIn() {
  const element = document.getElementById('element');
  element.classList.remove('hidden');
  element.classList.add('visible');
}

function fadeOut() {
  const element = document.getElementById('element');
  element.classList.remove('visible');
  element.classList.add('hidden');
}

위 코드는 요소를 페이드 인/아웃하는 간단한 자바스크립트 함수를 정의합니다. 요소를 페이드 인하려면 “fadeIn” 함수를 호출하고, 요소를 페이드 아웃하려면 “fadeOut” 함수를 호출하면 됩니다.

이제 웹 페이지에서 버튼을 클릭하여 요소를 페이드 인/아웃하는 부드러운 애니메이션을 즐길 수 있을 것입니다!

자바스크립트로 페이드 인/아웃 애니메이션을 구현하는 방법에 대한 튜토리얼을 제공했습니다. 이러한 애니메이션을 통해 웹 페이지의 사용자 경험을 향상시키고 시각적인 효과를 부여할 수 있습니다.

HTML

CSS

JavaScript

참고 자료