파도 애니메이션은 웹 페이지에서 동적이고 생동감 있는 효과를 주는데 많이 사용됩니다. 이번에는 자바스크립트를 사용하여 파도 애니메이션을 만들고, 이를 다른 애니메이션과 조합하여 사용하는 예시에 대해 설명하겠습니다.
1. HTML 구조 설정하기
먼저, HTML의 구조를 설정해야 합니다. 다음과 같이 <div> 요소를 사용하여 파도 애니메이션을 표현할 영역을 만들어주세요.
<div id="wave-animation"></div>
2. CSS 스타일 적용하기
파도 애니메이션을 위한 CSS 스타일을 적용해야 합니다. 다음과 같이 CSS를 작성하세요.
#wave-animation {
width: 200px;
height: 200px;
background-color: blue;
position: relative;
overflow: hidden;
}
#wave-animation::before {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background-color: lightblue;
animation: wave 2s linear infinite;
}
@keyframes wave {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
위의 CSS 코드는 파도 애니메이션을 표현하기 위해 ::before 선택자를 사용하여 추가적인 요소를 생성하고, animation 속성을 통해 애니메이션을 적용합니다.
3. 자바스크립트로 애니메이션 컨트롤하기
자바스크립트를 사용하여 애니메이션을 컨트롤할 수 있습니다. 예를 들어, 버튼을 클릭했을 때 파도 애니메이션을 시작하거나 멈출 수 있도록 구현해보겠습니다.
먼저, HTML에 버튼을 추가해주세요.
<button id="start-animation">애니메이션 시작</button>
<button id="stop-animation">애니메이션 멈춤</button>
그리고, 다음과 같이 자바스크립트를 작성하세요.
const startButton = document.getElementById("start-animation");
const stopButton = document.getElementById("stop-animation");
const waveAnimation = document.querySelector("#wave-animation::before");
startButton.addEventListener("click", () => {
waveAnimation.style.animationPlayState = "running";
});
stopButton.addEventListener("click", () => {
waveAnimation.style.animationPlayState = "paused";
});
위의 자바스크립트 코드는 animationPlayState 속성을 사용하여 애니메이션을 시작하거나 멈춥니다. addEventListener 메서드를 사용하여 버튼 클릭 이벤트를 감지하고, 해당 이벤트가 발생했을 때 애니메이션 상태를 변경합니다.
4. 다른 애니메이션과 조합하기
파도 애니메이션을 다른 애니메이션과 조합하여 사용할 수 있습니다. 예를 들어, 마우스 오버 시 파도 애니메이션이 시작하도록 구현해보겠습니다.
const waveAnimation = document.querySelector("#wave-animation::before");
waveAnimation.style.animationPlayState = "paused";
waveAnimation.addEventListener("mouseenter", () => {
waveAnimation.style.animationPlayState = "running";
});
waveAnimation.addEventListener("mouseleave", () => {
waveAnimation.style.animationPlayState = "paused";
});
위의 코드는 파도 애니메이션을 처음에는 멈춰놓고, 요소에 마우스를 올리면 애니메이션을 시작하고 마우스를 벗어나면 멈추도록 구현한 예시입니다.
결론
위에서는 자바스크립트를 사용하여 파도 애니메이션을 만들고, 버튼 클릭이나 마우스 이벤트 등 다른 이벤트와 조합하여 애니메이션을 컨트롤하는 예시를 설명했습니다. 이러한 방법을 응용하여 다양한 애니메이션 효과를 자유롭게 조합하여 웹 페이지를 더 다이나믹하고 화려하게 만들 수 있습니다.