웹사이트의 배경에 파도 효과를 추가하면 동적이고 생동감 있는 느낌을 줄 수 있습니다. 이번 포스트에서는 JavaScript를 사용하여 파도 효과를 가진 웹 배경을 만들어보겠습니다.
HTML 구조 작성
먼저, HTML 구조를 작성해야 합니다. 아래 예시에서는 <div> 요소에 wave-container 클래스를 추가하고, 그 안에 <canvas> 요소를 추가합니다.
<div class="wave-container">
<canvas id="wave"></canvas>
</div>
CSS 스타일 작성
다음으로, CSS 스타일을 작성해야 합니다. 아래 예시에서는 .wave-container 클래스에 필요한 스타일을 추가합니다. 배경색과 웨이브의 색상, 그림자 등을 설정할 수 있습니다.
.wave-container {
position: relative;
width: 100%;
height: 300px;
background-color: #333;
}
#wave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
JavaScript 코드 작성
이제, JavaScript 코드를 작성하여 파도 효과를 추가해보겠습니다. 아래 예시에서는 <canvas> 요소를 이용하여 웨이브를 그리는 함수인 drawWave를 작성합니다.
const canvas = document.getElementById("wave");
const ctx = canvas.getContext("2d");
const width = canvas.width = window.innerWidth;
const height = canvas.height = 300;
function drawWave() {
ctx.clearRect(0, 0, width, height);
ctx.fillStyle = "#fff";
ctx.beginPath();
const slices = 10;
const sliceWidth = width / slices;
const amplitude = 50;
const frequency = 0.02;
let x = 0;
let y = height / 2;
ctx.moveTo(x, y);
for (let i = 0; i < slices; i++) {
x += sliceWidth;
y = height / 2 + Math.sin(x * frequency) * amplitude;
ctx.lineTo(x, y);
}
ctx.lineTo(width, height);
ctx.lineTo(0, height);
ctx.closePath();
ctx.fill();
requestAnimationFrame(drawWave);
}
drawWave();
위의 코드에서는 drawWave 함수 내에서 파도를 그리기 위해 <canvas> 요소의 getContext 메소드를 사용합니다. 그리고 파도의 모양을 결정하는 변수들인 slices, sliceWidth, amplitude, frequency를 설정합니다. 이후, for 루프를 통해 파도를 그리고, ctx.fill 메소드를 통해 파도를 채웁니다. 마지막으로, requestAnimationFrame 함수를 사용하여 애니메이션 효과를 구현합니다.
결과 확인
위의 코드를 작성한 후 웹 브라우저에서 확인해보면, 파도 효과를 가진 웹 배경을 볼 수 있습니다. 또한, 윈도우 크기를 조절하면 웨이브가 유동적으로 변화하는 것을 확인할 수 있습니다.
결론
이번 포스트에서는 자바스크립트를 사용하여 파도 효과를 가진 웹 배경을 만드는 방법을 살펴보았습니다. 파도 효과를 추가하면 웹사이트에 생동감을 더할 수 있으며, 유저들에게 동적이고 멋진 경험을 제공할 수 있습니다. 독창적인 디자인을 위해 이 코드를 기반으로 확장 및 수정해보세요!