[javascript] 자바스크립트로 요소를 서서히 나타내거나 사라지게 하는 애니메이션 라이브러리

14 Dec 2023

javascript

이번에는 자바스크립트를 사용하여 웹 요소를 부드럽게 나타내거나 사라지게 하는 애니메이션 라이브러리에 대해 알아보겠습니다.

1. 시작하기

이 애니메이션 라이브러리는 CSS의 transition 속성과 자바스크립트의 setTimeout 함수를 이용하여 요소의 투명도(opacity)를 조절하여 부드러운 나타나고 사라짐 효과를 구현합니다.

2. 사용법

애니메이션을 적용할 요소에 transition 속성을 설정합니다.
자바스크립트 함수를 사용하여 요소의 투명도를 바꿔서 애니메이션 효과를 줍니다.

3. 예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <style>
    .fade-in-out {
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }
  </style>
</head>
<body>
  <button onclick="fadeInOut()">Fade In/Out</button>
  <div id="element" class="fade-in-out">애니메이션 효과</div>
  <script>
    function fadeInOut() {
      var element = document.getElementById('element');
      if (element.style.opacity === '0') {
        element.style.opacity = '1';
      } else {
        element.style.opacity = '0';
      }
    }
  </script>
</body>
</html>

위의 코드는 CSS의 transition 속성을 사용하여 fade-in-out 클래스가 적용된 요소가 나타나거나 사라지는 애니메이션을 구현한 예제입니다.

4. 참고 자료

이 애니메이션 라이브러리는 간단한 자바스크립트 함수와 CSS의 transition 속성만을 사용하여 부드러운 나타나고 사라짐 효과를 구현할 수 있습니다. 웹 개발에서 간단한 애니메이션 효과를 적용할 때 유용하게 활용할 수 있습니다.

목차

1. 시작하기

2. 사용법

3. 예제 코드

4. 참고 자료