[javascript] 자바스크립트로 작동하는 파도 애니메이션을 다른 애니메이션과 조합하여 사용하는 예시 소개

01 Dec 2023

javascript

파도 애니메이션은 웹사이트나 앱 등에서 동적인 효과를 주기 위해 많이 사용되는 기술 중 하나입니다. 이번 블로그에서는 자바스크립트로 작동하는 파도 애니메이션을 다른 애니메이션과 조합하여 사용하는 예시를 소개하겠습니다.

1. CSS와 자바스크립트로 파도 애니메이션 구현하기

다음은 CSS와 자바스크립트를 사용하여 간단한 파도 애니메이션을 구현하는 예시입니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    #wave {
      position: relative;
      width: 100%;
      height: 300px;
      background-color: deepskyblue;
      overflow: hidden;
    }

    #wave .wave-element {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 20px;
      background-color: white;
      animation: wave 2s infinite linear;
    }

    @keyframes wave {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-100%);
      }
    }
  </style>
</head>
<body>
  <div id="wave">
    <div class="wave-element"></div>
  </div>

  <script>
    // 파도 애니메이션과 조합할 다른 애니메이션 코드 작성
  </script>
</body>
</html>

위 코드는 파도 애니메이션을 생성하는 CSS와 자바스크립트 코드입니다. 파도 애니메이션은 wave라는 클래스를 가진 div 요소를 이용하여 구현되며, 자바스크립트로 해당 요소를 조작하여 애니메이션을 제어할 수 있습니다.

2. 파도 애니메이션과 다른 애니메이션 조합하기

이제 파도 애니메이션과 다른 애니메이션을 조합하여 사용하는 예시를 소개하겠습니다.

const waveElement = document.querySelector('.wave-element');

// 다른 애니메이션과 조합하는 코드 작성
waveElement.addEventListener('mouseover', () => {
  waveElement.style.animation = 'none';
  waveElement.style.backgroundColor = 'yellow';
});

waveElement.addEventListener('mouseout', () => {
  waveElement.style.animation = 'wave 2s infinite linear';
  waveElement.style.backgroundColor = 'white';
});

위의 JavaScript 코드는 파도 애니메이션 요소에 마우스를 올리거나 벗어날 때 다른 애니메이션을 동작시키는 예시입니다. mouseover 이벤트와 mouseout 이벤트를 이용하여 해당 요소의 애니메이션을 제어하고, 배경색을 변경하는 코드를 작성하였습니다.

3. 결론

이번 블로그에서는 자바스크립트로 작동하는 파도 애니메이션을 다른 애니메이션과 조합하여 사용하는 예시를 소개하였습니다. 파도 애니메이션은 CSS와 자바스크립트의 강력한 기능을 활용하여 다양한 동적 효과를 구현할 수 있습니다. 다른 애니메이션과 조합하여 사용하면 더욱 흥미로운 웹사이트나 앱을 제작할 수 있을 것입니다.

참고 자료: