[javascript] 웹 사이트에 자바스크립트 파도 애니메이션 효과 추가하기

01 Dec 2023

javascript

웹 사이트에 애니메이션 효과를 추가하면 사용자들에게 더욱 동적이고 흥미로운 경험을 제공할 수 있습니다. 이번에는 자바스크립트를 사용하여 파도 애니메이션 효과를 웹 사이트에 추가하는 방법에 대해 알아보겠습니다.

1. HTML 파일 생성하기

먼저, 애니메이션 효과를 추가할 HTML 파일을 생성합니다. 여기에는 파도 애니메이션을 표시할 부모 요소가 필요합니다. 아래와 같이 HTML 파일을 생성합니다.

<!DOCTYPE html>
<html>
<head>
    <title>파도 애니메이션</title>
    <style>
        .wave {
            position: relative;
            width: 100%;
            height: 400px;
            background-color: #3498db;
            overflow: hidden;
        }
        .wave .wave-effect {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #2980b9;
        }
    </style>
</head>
<body>
    <div class="wave">
        <div class="wave-effect"></div>
    </div>
    <script src="wave-animation.js"></script>
</body>
</html>

위의 코드에서는 .wave 클래스로 정의된 부모 요소와 .wave-effect 클래스로 정의된 애니메이션 효과를 표시할 요소를 만들었습니다.

2. JavaScript 파일 생성하기

이제 애니메이션 효과를 생성하고 제어할 JavaScript 파일을 생성합니다. 아래와 같이 JavaScript 파일을 생성합니다.

(function() {
    var wave = document.querySelector('.wave-effect');
    var waveWidth = wave.offsetWidth;
    var waveHeight = wave.offsetHeight;

    function animateWave() {
        var time = new Date().getTime() * 0.002;
        var x = waveWidth / 2 + Math.sin(time) * (waveWidth / 2);
        var y = waveHeight / 2 + Math.cos(time * 0.5) * (waveHeight / 2);
        wave.style.transform = `translate(${x}px, ${y}px)`;

        requestAnimationFrame(animateWave);
    }

    animateWave();
})();

위의 코드에서는 wave 클래스를 가진 요소를 선택하고, 요소의 너비와 높이를 가져옵니다. 그런 다음, animateWave 함수를 정의하여 파도 애니메이션을 생성하고 제어합니다. requestAnimationFrame 함수를 사용하여 애니메이션을 부드럽게 실행합니다.

3. 웹 페이지에 연결하기

이제 HTML 파일에 JavaScript 파일을 연결합니다. HTML 파일의 body 요소 끝에 아래 코드를 추가합니다.

<script src="wave-animation.js"></script>

위의 코드에서는 wave-animation.js 파일을 연결하므로 JavaScript 파일의 이름이 wave-animation.js인지 확인하고 경로를 올바르게 설정해야 합니다.

4. 웹 브라우저에서 테스트하기

이제 웹 브라우저에서 HTML 파일을 열고 파도 애니메이션 효과가 제대로 표시되는지 확인합니다. 애니메이션이 부드럽게 움직이며 파도처럼 흔들리는 것을 볼 수 있습니다.

결론

이제 웹 사이트에 파도 애니메이션 효과를 추가하는 방법을 알아보았습니다. 이를 통해 웹 사이트에 동적이고 흥미로운 요소를 추가하여 사용자들에게 더욱 흥미로운 경험을 제공할 수 있습니다.

참고 문서: