파도 효과는 웹사이트에서 동적인 움직임을 만들어주는 효과 중 하나입니다. 이 효과를 자바스크립트를 이용해 구현하면 사용자로부터 입력을 받아 파도의 속도와 크기를 조절할 수 있습니다.

HTML 구조

먼저, HTML 파일에 파도 효과를 적용할 요소를 생성합니다. 아래와 같은 구조로 요소를 작성합니다.

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

CSS 스타일

다음으로, CSS 스타일을 설정하여 파도 요소가 보이도록 만듭니다. 아래는 예시입니다.

#wave {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: wave-animation 1s infinite;
}

@keyframes wave-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

자바스크립트 코드

이제, 자바스크립트 코드를 추가하여 사용자로부터 파도의 속도와 크기를 입력 받을 수 있도록 만듭니다. 아래는 예시 코드입니다.

var waveElement = document.getElementById("wave");

function setWaveSpeed(speed) {
  waveElement.style.animationDuration = speed + "s";
}

function setWaveSize(size) {
  waveElement.style.transform = "scale(" + size + ")";
}

var speedInput = document.getElementById("speed-input");
var sizeInput = document.getElementById("size-input");

speedInput.addEventListener("input", function() {
  setWaveSpeed(speedInput.value);
});

sizeInput.addEventListener("input", function() {
  setWaveSize(sizeInput.value);
});

위의 코드에서 setWaveSpeed 함수는 파도의 속도를 설정하고, setWaveSize 함수는 파도의 크기를 설정합니다. 사용자로부터 파도의 속도와 크기를 입력받는 부분은 speed-input과 size-input ID를 가진 입력 요소를 이용하여 구현되었습니다.

결과 확인하기

모든 코드 작성이 완료되었다면, HTML 파일을 열어 파도 효과를 확인해보세요. 사용자가 파도의 속도와 크기를 조절할 수 있는 입력 요소를 제공하므로, 입력 값에 따라 파도 효과가 변할 것입니다.

참고 자료

• MDN web docs
• W3Schools