파도 애니메이션은 웹 사이트에 동적이고 시선을 끄는 요소를 추가하는 좋은 방법입니다. 여기에서는 자바스크립트를 사용하여 파도 애니메이션을 구현하고 웹 사이트에 통합하는 방법을 알아보겠습니다.
1. HTML 구조 설정
파도 애니메이션을 통합하려는 웹 페이지의 HTML 구조를 설정해야 합니다. 아래는 기본적인 HTML 구조입니다.
<!DOCTYPE html>
<html>
<head>
<title>파도 애니메이션 예제</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>파도 애니메이션 예제</h1>
<div id="wave"></div>
<script src="script.js"></script>
</body>
</html>
위 예제에서 div 요소는 파도 애니메이션을 표현할 영역입니다. CSS 스타일 시트를 통해 파도 애니메이션을 디자인할 수 있습니다. script.js 파일에서 애니메이션을 구현할 것이므로 이를 로드하기 위해 <script> 태그를 사용합니다.
2. CSS 스타일링
파도 애니메이션을 웹 사이트에 통합하기 위해서는 CSS를 사용하여 애니메이션을 디자인해야 합니다. 아래는 예제 CSS 코드입니다.
#wave {
width: 100%;
height: 100px;
position: relative;
overflow: hidden;
}
#wave:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, #007bff, #00bcd4);
bottom: 0;
left: 0;
z-index: -1;
animation: wave 1.5s linear infinite;
}
@keyframes wave {
0% {
transform: translateX(0) translateY(0);
}
100% {
transform: translateX(-100%) translateY(0);
}
}
위 CSS 코드는 파도 애니메이션을 생성하기 위해 <div id="wave"> 요소를 이용합니다. :before 선택자를 사용하여 요소 내부에 파도 애니메이션을 생성합니다. background 속성을 사용하여 파도 애니메이션의 색상을 정의하고, animation 속성을 사용하여 애니메이션의 속도와 무한 반복을 설정합니다.
3. 자바스크립트 코드 추가
이제 애니메이션을 구현하기 위해 자바스크립트 코드를 추가해야 합니다. 아래는 예제 자바스크립트 코드입니다.
// script.js
window.addEventListener('DOMContentLoaded', () => {
const wave = document.getElementById('wave');
const waveAnimation = wave.querySelector(':before');
// 애니메이션 시작
waveAnimation.style.animationPlayState = 'running';
});
위 자바스크립트 코드는 DOMContentLoaded 이벤트를 사용하여 웹 페이지가 로드되면 파도 애니메이션을 시작합니다. getElementById 메서드를 사용하여 wave와 waveAnimation을 가져온 다음, style 속성을 사용하여 애니메이션의 실행 상태를 변경합니다.
4. 웹 페이지 통합
위의 단계를 완료했다면, 자바스크립트로 구현한 파도 애니메이션을 웹 사이트에 통합할 준비가 끝났습니다. HTML 파일, CSS 파일 및 JavaScript 파일을 호스팅하고 웹 페이지에 적용하면 파도 애니메이션을 볼 수 있습니다.