파도 효과는 웹 페이지에 동적인 움직임을 주어 시각적인 흥미를 더해주는 효과입니다. 이번 포스트에서는 자바스크립트를 사용하여 동적인 파도 효과를 만드는 방법에 대해 알아보겠습니다.

HTML 구조

먼저, HTML 구조를 설정해야합니다. 아래와 같이 canvas 요소를 추가해주세요. canvas 요소를 사용하여 그래픽을 그릴 수 있습니다.

<canvas id="wave"></canvas>

CSS 스타일링

파도 효과를 더욱 시각적으로 만들기 위해 CSS 스타일을 적용해보겠습니다. 아래와 같이 스타일 코드를 추가해주세요.

#wave {
  width: 100%;
  height: 300px;
  background-color: #000;
}

자바스크립트 코드

이제 자바스크립트 코드를 작성하여 파도 효과를 생성해보겠습니다.

var canvas = document.getElementById('wave');
var context = canvas.getContext('2d');

var waveY = canvas.height / 2;
var waveSpeed = 0.02;

function drawWave() {
  context.clearRect(0, 0, canvas.width, canvas.height);

  context.beginPath();

  for (var x = 0; x < canvas.width; x += 1) {
    var y = waveY + Math.sin(x * waveSpeed) * 50;
    
    context.lineTo(x, y);
  }

  context.strokeStyle = '#FFF';
  context.lineWidth = 2;
  context.stroke();

  waveY += 0.5;

  requestAnimationFrame(drawWave);
}

drawWave();

위의 코드는 canvas 요소를 가져와서 그래픽 컨텍스트(context)를 생성합니다. waveY 변수는 초기 파도의 위치를 나타내며, waveSpeed 변수는 파도의 속도를 조절하는 역할을 합니다. drawWave 함수는 주기적으로 호출되어 파도를 그리고 그래픽을 갱신합니다.

실행 결과

위의 코드를 실행하면 파도 효과가 생성되는 것을 확인할 수 있습니다. 파도는 지속적으로 움직이며, 주기적으로 그리기 작업이 반복됩니다.

결론

이번 포스트에서는 자바스크립트를 사용하여 동적인 파도 효과를 만드는 방법에 대해 알아보았습니다. 파도 효과를 웹 페이지에 적용하면 동적인 움직임을 통해 사용자에게 시각적인 흥미를 제공할 수 있습니다. 위의 코드를 참고하여 직접 파도 효과를 구현해 보세요!