자바스크립트로 해변에서 파도치는 애니메이션 만들기

18 Oct 2023

javascript

해변에서 파도가 치는 모습은 매우 아름답습니다. 이번에는 자바스크립트를 사용하여 해변에서 파도치는 애니메이션을 만들어보겠습니다. 이 애니메이션은 브라우저에서 동작하며 파도가 일정한 간격으로 차오르고 내리는 모습을 표현할 것입니다.

HTML 파일 구성

먼저 HTML 파일을 작성해봅시다. 아래와 같이 코드를 작성합니다.

<!DOCTYPE html>
<html>
<head>
    <title>해변 애니메이션</title>
    <style>
        #wave {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 200px;
            background-color: deepskyblue;
        }
    </style>
</head>
<body>
    <div id="wave"></div>
    
    <script src="animation.js"></script>
</body>
</html>

위 코드에서는 div 요소에 id="wave"를 부여하여 파도를 표현할 공간을 만들고, CSS 스타일을 적용했습니다. script 태그를 통해 자바스크립트 파일을 불러옵니다. 이제 자바스크립트 파일을 작성해봅시다.

자바스크립트 파일 구성

아래와 같이 자바스크립트 파일 animation.js를 작성합니다.

const waveElement = document.getElementById('wave');
const waveHeight = 100;
const waveSpeed = 0.05; // 파도의 속도 조절

let wavePosition = 0;

function animateWave() {
    wavePosition += waveSpeed;
    const waveBend = Math.sin(wavePosition) * waveHeight;
    waveElement.style.transform = `translateY(${waveBend}px)`;

    requestAnimationFrame(animateWave);
}

animateWave();

위 코드에서는 waveElement 변수를 통해 div 요소를 가져옵니다. waveHeight 변수는 파도의 최대 높이를 정의하고, waveSpeed 변수는 파도의 속도를 조절하는 값입니다.

animateWave() 함수는 파도 애니메이션을 처리합니다. wavePosition 변수를 업데이트하고, Math.sin() 함수를 사용하여 파도의 높이 변화를 계산합니다. 그리고 style.transform 속성을 통해 파도를 이동시킵니다.

requestAnimationFrame() 함수를 이용하여 애니메이션을 실행합니다. 이 함수는 브라우저가 업데이트될 때마다 애니메이션을 반복 호출합니다.

결과 확인

HTML 파일을 브라우저에서 열어보면, 해변에서 파도치는 애니메이션을 볼 수 있습니다. 파도의 높이와 속도를 조절하여 원하는 파도 모습을 만들어보세요!

이번 글에서는 자바스크립트를 사용하여 해변에서 파도치는 애니메이션을 구현하는 방법을 알아보았습니다. 파도 외에 다양한 애니메이션을 구현하는 데에도 자바스크립트를 유용하게 활용할 수 있습니다. 자바스크립트의 다양한 기능과 라이브러리를 활용하여 더욱 다채로운 웹 애니메이션을 만들어보세요!

#javascript #animation