웨이브 애니메이션은 사용자에게 동적이고 흥미로운 시각적 효과를 제공하는 데 유용한 기술입니다. 자바스크립트를 이용하여 간단한 웨이브 애니메이션을 만들어보겠습니다.

HTML 구조 만들기

먼저, 애니메이션을 표시할 수 있는 구조를 HTML로 만들어야 합니다. 다음과 같이 div 요소를 사용하여 웨이브 애니메이션을 감싸고 있는 컨테이너를 만들어보겠습니다.

<div id="wave-container"></div>

CSS 스타일링 적용하기

다음으로, 웨이브 애니메이션을 꾸미기 위해 CSS 스타일링을 적용해봅시다. 컨테이너에 웨이브 효과를 적용하기 위해서는 background-image 속성을 사용할 수 있습니다. 아래는 예시 코드입니다.

#wave-container {
  width: 400px;
  height: 200px;
  background-color: #f3f3f3;
  background-image: linear-gradient(to right, #a8edea, #fed6e3);
  animation: wave-animation 3s infinite linear;
}

@keyframes wave-animation {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 400px;
  }
}

자바스크립트로 애니메이션 제어하기

마지막으로, 자바스크립트를 사용하여 웨이브 애니메이션을 제어해봅시다. 애니메이션의 속도를 조절하거나 애니메이션을 일시 정지하거나 재생시키는 등의 제어가 가능합니다.

const waveContainer = document.getElementById('wave-container');
const waveAnimation = waveContainer.style.animation;

// 애니메이션을 일시 정지하는 함수
function pauseAnimation() {
  waveContainer.style.animationPlayState = 'paused';
}

// 애니메이션을 재생시키는 함수
function playAnimation() {
  waveContainer.style.animationPlayState = 'running';
}

// 애니메이션 속도를 느리게 하는 함수
function slowDownAnimation() {
  waveContainer.style.animationDuration = '5s';
}

// 애니메이션 속도를 빠르게 하는 함수
function speedUpAnimation() {
  waveContainer.style.animationDuration = '1s';
}

결론

이제 자바스크립트 환경에서 웨이브 애니메이션을 만드는 방법을 알아보았습니다. HTML, CSS, JavaScript를 조합하여 다양한 동적 효과 및 애니메이션을 만들 수 있으니 창의적인 아이디어를 활용해보세요!

참고 자료

• MDN 문서 - CSS 애니메이션
• MDN 문서 - 자바스크립트 기초
• CSS Gradient Generator