파도 효과는 웹 페이지나 애니메이션에서 많이 사용되는 전환 효과 중 하나입니다. 이 효과는 파도가 물결처럼 번져 나가는 모습을 모방하여 만들어졌습니다. 자바스크립트를 사용하여 파도 효과를 구현하는 간단한 예시를 소개하겠습니다.

HTML 구조 설정

먼저, HTML 구조를 설정해야 합니다. 아래의 예시는 div 요소 하나에 wave라는 클래스를 추가한 구조입니다.

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

CSS 스타일 설정

다음으로, CSS 스타일을 설정해야 합니다. 아래의 예시는 wave 클래스에 대해서 파도 효과를 만들기 위한 CSS 스타일입니다.

.wave {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 50%;
  position: relative;
  animation: waveEffect 2s ease-in-out infinite;
}

@keyframes waveEffect {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(2);
    opacity: 0.5;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

위의 코드에서 wave 클래스는 파란색 배경을 가진 원 모양을 가지고 있습니다. animation 속성을 사용하여 waveEffect라는 애니메이션을 적용합니다. 이 애니메이션은 2초 동안 실행되며, 시작과 끝에는 scale과 opacity 속성을 조정하여 파도 효과를 만듭니다.

자바스크립트 구현

자바스크립트를 사용하여 파도 효과를 구현해보겠습니다. 아래의 예시 코드는 자바스크립트를 사용하여 wave 클래스를 가진 요소를 동적으로 생성하고, 웹 페이지에 추가하는 코드입니다.

const waveElement = document.createElement('div');
waveElement.classList.add('wave');
document.body.appendChild(waveElement);

위의 코드를 실행하면 파도 효과가 적용된 원 모양의 요소가 웹 페이지에 추가됩니다.

실행 결과

위의 코드를 실행하면 파란색 배경을 가진 원 모양이 파도처럼 번져 나가는 효과를 볼 수 있습니다. 파도가 원 모양을 중심으로 커지다가 사라지는 동작이 반복됩니다.

여기까지 파도 효과를 이용한 자바스크립트로 만든 전환 효과 예시를 소개했습니다. 이 예시를 참고하여 웹 페이지나 애니메이션에서 파도 효과를 구현해 보세요!

참고 자료

• CSS Animation
• CSS Animation Effects
• JavaScript Animation