[javascript] 자바스크립트로 구현된 파도 애니메이션을 웹 사이트에 통합하는 방법과 단계

01 Dec 2023

javascript

웹 사이트에 파도 애니메이션을 추가하면 사용자들에게 더욱 동적이고 시각적으로 매력적인 경험을 제공할 수 있습니다. 이번 블로그 포스트에서는 자바스크립트를 사용하여 파도 애니메이션을 구현하고 웹 사이트에 통합하는 방법을 알아보겠습니다.

단계 1: HTML에 Canvas 요소 추가하기

파도 애니메이션을 구현하기 위해 우선 HTML 문서에 <canvas> 요소를 추가해야 합니다. <canvas> 요소는 자바스크립트로 그래픽을 그릴 수 있는 영역을 제공합니다. 다음은 예시 코드입니다:

<canvas id="waveCanvas"></canvas>

단계 2: 자바스크립트 파일 생성하기

파도 애니메이션을 구현하기 위해 자바스크립트 파일을 생성해야 합니다. 이 파일은 <canvas> 요소를 가져와 파도 애니메이션을 그릴 것입니다.

우선, 자바스크립트 파일을 생성한 후, 다음 코드를 추가해보세요:

const canvas = document.querySelector('#waveCanvas');
const ctx = canvas.getContext('2d');

위 코드는 <canvas> 요소를 가져와서 컨텍스트를 생성하는 역할을 합니다.

단계 3: 파도 애니메이션 그리기

이제 파도를 그리기 위한 애니메이션을 구현할 차례입니다. 자바스크립트 코드에 아래 코드를 추가하여 파도 애니메이션을 그릴 수 있습니다:

let waveHeight = canvas.height / 2;
let xOffset = 0;

function drawWave() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.moveTo(0, waveHeight);
  
  for (let x = 0; x < canvas.width; x++) {
    ctx.lineTo(x, waveHeight + Math.sin((x + xOffset) * 0.05) * 50);
  }
  
  ctx.lineTo(canvas.width, canvas.height);
  ctx.lineTo(0, canvas.height);
  ctx.lineTo(0, waveHeight);
  ctx.fillStyle = '#00CED1';
  ctx.fill();
  
  xOffset += 0.5;
  
  requestAnimationFrame(drawWave);
}

drawWave();

위 코드는 간단한 파도 애니메이션을 그리는 함수입니다. clearRect() 메소드로 캔버스를 지우고, beginPath() 메소드로 새로운 경로를 시작합니다. 그리고 lineTo() 메소드로 파도를 그립니다. 마지막으로 fill() 메소드로 파도를 채우고, requestAnimationFrame() 메소드로 애니메이션을 계속 업데이트합니다.

단계 4: 웹사이트에 자바스크립트 파일 추가하기

이제 자바스크립트 파일을 HTML 문서에 추가하여 웹사이트에 파도 애니메이션을 통합할 수 있습니다. HTML 문서의 <head> 또는 <body> 태그 안에 <script> 태그를 추가하여 자바스크립트 파일을 연결해보세요:

<script src="waveAnimation.js"></script>

위 예시에서는 waveAnimation.js라는 파일명을 사용했습니다. 웹사이트에 맞는 파일명으로 수정해주세요.

단계 5: 웹 페이지에서 파도 애니메이션 확인하기

이제 웹사이트를 테스트하고 파도 애니메이션을 확인할 차례입니다. 웹 브라우저에서 HTML 파일을 열거나 웹서버에 웹사이트를 업로드한 후, 파도 애니메이션이 원활하게 작동하는지 확인해보세요.

이상으로 자바스크립트로 구현된 파도 애니메이션을 웹사이트에 통합하는 방법과 단계를 알아보았습니다. 이를 통해 웹사이트에 동적하고 시각적으로 매력적인 요소를 추가할 수 있습니다.