파도 애니메이션은 웹페이지에 동적이고 생동감 있는 효과를 추가하는데 사용됩니다. 이번 튜토리얼에서는 CSS와 자바스크립트를 조합하여 파도 애니메이션 효과를 구현하는 방법을 알아보겠습니다.

1. HTML 준비하기

먼저, 원하는 위치에 div 요소를 추가하고 파도 애니메이션을 적용할 요소에는 wave 클래스를 추가합니다. 예를 들어, 다음과 같은 HTML 코드를 작성할 수 있습니다.

<div class="wave"></div>

2. CSS 스타일링하기

다음으로, 파도 애니메이션의 스타일을 작성합니다. transform 속성을 활용하여 요소를 원하는 모양으로 변형할 수 있습니다. 아래는 파도 애니메이션 스타일의 예시입니다.

.wave {
  height: 200px;
  width: 200px;
  background-color: #00b3b3;
  border-radius: 50%;
  position: relative;
  animation: waveAnimation 2s ease-in-out infinite;
}

@keyframes waveAnimation {
  0% {
    transform: scale(1) rotate(0deg);
    border-radius: 50%;
  }
  50% {
    transform: scale(0.8) rotate(45deg);
    border-radius: 60px 40px;
  }
  100% {
    transform: scale(1) rotate(0deg);
    border-radius: 50%;
  }
}

위의 CSS 코드는 파도 애니메이션을 구현하기 위한 기본 스타일을 정의합니다. wave 클래스는 넓이, 높이, 배경색, border-radius, 애니메이션 등의 속성을 포함하고 있습니다.

3. 자바스크립트 추가하기

파도 애니메이션을 원하는 조작에 의해 시작 및 정지할 수 있도록 자바스크립트 코드를 추가해야합니다. 아래는 자바스크립트 코드의 예시입니다.

var waveElement = document.querySelector('.wave');

function startWaveAnimation() {
  waveElement.style.animationPlayState = 'running';
}

function stopWaveAnimation() {
  waveElement.style.animationPlayState = 'paused';
}

// 원하는 이벤트에 따라 애니메이션 조작
waveElement.addEventListener('mouseover', startWaveAnimation);
waveElement.addEventListener('mouseout', stopWaveAnimation);

위의 자바스크립트 코드는 .wave 클래스를 갖는 요소를 선택하고, startWaveAnimation 및 stopWaveAnimation 함수를 정의합니다. 마우스 오버 및 마우스 아웃 이벤트가 발생할 때 애니메이션을 시작 및 정지하도록 이벤트 리스너를 추가합니다.

4. 테스트하기

HTML 파일을 브라우저에서 열어 파도 애니메이션을 테스트해볼 수 있습니다. 마우스를 요소 위에 올리면 애니메이션이 시작되고, 마우스를 요소 밖으로 옮기면 애니메이션이 정지됩니다.

결론

CSS와 자바스크립트를 조합하여 파도 애니메이션 효과를 구현하는 방법을 알아보았습니다. 이를 응용하여 다양한 웹페이지에 동적이고 생동감 있는 효과를 추가할 수 있습니다.