[javascript] 자바스크립트를 사용하여 파도 타이머 만들기

01 Dec 2023

javascript

이번에는 자바스크립트를 이용해서 파도 타이머를 만드는 방법을 알아보겠습니다. 파도 타이머는 일정한 시간 동안 파도가 일어나는 애니메이션을 보여주는 기능입니다. 이를테면 파도 소리를 들으면서 파도가 일어나는 애니메이션을 만들어 볼 수 있습니다.

HTML 파일 생성

먼저, HTML 파일을 생성하고 다음과 같이 코드를 작성합니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>파도 타이머</title>
  <style>
    #wave {
      width: 200px;
      height: 200px;
      background-color: blue;
      animation-name: wave;
      animation-duration: 2s;
      animation-iteration-count: infinite;
    }

    @keyframes wave {
      0% {
        width: 200px;
        height: 200px;
      }
      50% {
        width: 300px;
        height: 300px;
      }
      100% {
        width: 200px;
        height: 200px;
      }
    }
  </style>
</head>
<body>
  <div id="wave"></div>
</body>
</html>

위의 코드에서는 #wave라는 ID를 가진 <div> 요소를 생성하고, 이를 파도 타이머로 만들기 위해 스타일과 애니메이션을 적용합니다.

자바스크립트 파일 생성

자바스크립트 파일을 생성하고 다음과 같이 코드를 작성합니다.

// 파도 타이머 시작
function startWaveTimer() {
  document.getElementById("wave").style.animationPlayState = "running";
}

// 파도 타이머 일시 정지
function pauseWaveTimer() {
  document.getElementById("wave").style.animationPlayState = "paused";
}

위의 코드에서는 startWaveTimer() 함수와 pauseWaveTimer() 함수를 생성하여 파도 타이머를 시작하거나 일시 정지시킬 수 있도록 합니다. 함수 안에서는 해당 요소의 animationPlayState 속성을 설정해주어 애니메이션을 실행하거나 일시 정지시킵니다.

결과 확인

HTML 파일을 웹 브라우저에서 열어보면 파도 타이머가 잘 동작하는 것을 확인할 수 있습니다. 파란색의 정사각형이 일정한 간격으로 확대 및 축소되면서 파도의 모션을 표현합니다.

이렇게 자바스크립트와 애니메이션을 이용하여 파도 타이머를 만들 수 있습니다.

참고 자료

CSS 애니메이션