이 글에서는 자바스크립트를 사용하여 파도 애니메이션을 구현하는 예제를 소개하려고 합니다. 파도 애니메이션은 웹사이트나 모바일 애플리케이션에 흥미로운 시각적 효과를 제공할 수 있으며, 자바스크립트를 사용하면 동적인 애니메이션을 만들 수 있습니다.

예제 설명

다음은 자바스크립트로 구현한 파도 애니메이션 예제의 코드입니다.

// HTML 요소 가져오기
const container = document.querySelector('.container');
const wave = document.querySelector('.wave');

// 파도 애니메이션 함수
function animateWave() {
  let width = 1;
  const waveHeight = 50;

  // 파도 애니메이션 프레임
  function frame() {
    if (width >= container.clientWidth) {
      clearInterval(intervalId);
    } else {
      width++;
      wave.style.width = `${width}px`;
      wave.style.height = `${waveHeight + Math.sin(width * 0.05) * 50}px`;
    }
  }

  // 파도 애니메이션 시작
  const intervalId = setInterval(frame, 10);
}

// 파도 애니메이션 실행
animateWave();

위 예제는 HTML 요소를 자바스크립트로 가져와서 파도 애니메이션을 구현하는 함수인 animateWave()를 정의하고 실행하는 예제입니다. container는 애니메이션을 표시할 부모 요소를 나타내고, wave는 파도가 움직일 요소입니다. 애니메이션은 width 변수를 이용하여 요소의 너비를 증가시키고, Math.sin() 함수를 사용하여 파도의 높이를 계산합니다.

실행 결과

위 예제를 실행하면, wave 요소가 점점 너비가 커지면서 파도가 움직이는 애니메이션을 볼 수 있습니다.

결론

이번에는 자바스크립트를 사용하여 파도 애니메이션을 구현하는 예제를 살펴보았습니다. 자바스크립트를 사용하면 다양한 시각적 효과를 구현할 수 있으므로, 웹사이트나 애플리케이션에서 흥미로운 애니메이션을 추가해보세요!