[javascript] 파도 애니메이션을 자바스크립트로 만들어 다른 애니메이션과 조합하는 예시

01 Dec 2023

javascript

파도 애니메이션은 웹 애니메이션에서 가장 많이 사용되는 효과 중 하나입니다. 이번에는 자바스크립트를 사용하여 파도 애니메이션을 만들고, 다른 애니메이션과 조합하는 예시를 살펴보겠습니다.

HTML 구조

먼저 HTML 구조를 만들어 보겠습니다. 아래와 같이 간단한 div 요소를 만들어줍니다.

<div class="wave"></div>
<div class="other-animation"></div>

CSS 스타일 설정

다음으로 CSS를 이용하여 파도 애니메이션과 다른 애니메이션을 설정해줍니다. 편의를 위해 아래와 같이 스타일을 설정하였습니다.

.wave {
  width: 200px;
  height: 200px;
  background-color: #00b3b3;
  position: relative;
  animation: wave-animation 2s infinite;
}

.other-animation {
  width: 100px;
  height: 100px;
  background-color: #ff69b4;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: other-animation 1s infinite;
}

@keyframes wave-animation {
  0% {
    border-radius: 50%;
    transform: scale(1);
    opacity: 1;
  }

  50% {
    border-radius: 0;
    transform: scale(2);
    opacity: 0.5;
  }

  100% {
    border-radius: 50%;
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes other-animation {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

자바스크립트 구현

마지막으로 자바스크립트를 이용하여 파도 애니메이션과 다른 애니메이션을 조합하도록 구현해보겠습니다.

const waveElement = document.querySelector('.wave');
const otherAnimationElement = document.querySelector('.other-animation');

setInterval(() => {
  waveElement.classList.toggle('wave-animation');
  otherAnimationElement.classList.toggle('other-animation');
}, 3000);

위의 코드는 3초마다 waveElement의 wave-animation 클래스와 otherAnimationElement의 other-animation 클래스를 토글(toggle)하는 역할을 합니다. 이렇게 하면 파도 애니메이션과 다른 애니메이션을 번갈아가며 보여줄 수 있습니다.

결과 확인

위의 코드를 HTML 파일에 추가하고 웹 브라우저에서 확인해보세요. 파도 애니메이션과 다른 애니메이션이 번갈아가며 나타나는 것을 확인할 수 있습니다.

결론

이 예시를 통해 자바스크립트를 사용하여 파도 애니메이션과 다른 애니메이션을 조합하는 방법을 알아보았습니다. 다양한 애니메이션 효과들을 적절히 조합하여 창의적이고 멋진 웹 애니메이션을 만들어 보세요.