텍스트 애니메이션은 웹사이트나 웹 애플리케이션에서 시각적 효과를 제공하는 데 사용됩니다. 이번에는 자바스크립트의 파도 애니메이션을 이용하여 신선한 텍스트 애니메이션을 만들어보겠습니다. 이 애니메이션은 텍스트가 파도처럼 움직이는 효과를 제공하여 독특하고 시선을 사로잡는 효과를 만들어낼 수 있습니다.
필요한 기술
이 텍스트 애니메이션을 만들기 위해서는 다음과 같은 기술이 필요합니다:
- HTML: 애니메이션을 보여줄 텍스트를 담을 HTML 요소가 필요합니다.
- CSS: 텍스트의 스타일링과 애니메이션 설정을 할 수 있습니다.
- 자바스크립트: 애니메이션을 제어하기 위해 자바스크립트 코드를 작성해야 합니다.
HTML 구조
텍스트 애니메이션을 보여줄 HTML 구조를 만들기 위해 다음과 같은 코드를 작성합니다:
<div id="animation-container">
<h1 id="animated-text">애니메이션 효과</h1>
</div>
위의 코드에서 animation-container라는 id를 가진 div 요소 안에 animated-text라는 id를 가진 h1 요소가 있습니다. 이 h1 요소가 애니메이션 효과를 받을 텍스트가 되겠습니다.
CSS 스타일링
텍스트 애니메이션에 적용할 CSS 스타일링을 설정하기 위해 다음과 같은 코드를 작성합니다:
#animation-container {
width: 100%;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
background-color: #f7f7f7;
}
#animated-text {
font-size: 48px;
font-weight: bold;
color: #333;
text-transform: uppercase;
animation: waving 2s ease-in-out infinite;
}
@keyframes waving {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(-20deg);
}
100% {
transform: rotate(0deg);
}
}
위의 코드에서 animation-container는 애니메이션 효과를 담을 영역을 스타일링하고, animated-text는 애니메이션 효과를 받을 텍스트의 스타일을 지정하는데 사용됩니다. animation 속성을 통해 waving이라는 애니메이션을 2초간 반복하도록 설정하였습니다.
자바스크립트 코드
텍스트 애니메이션을 제어하기 위해 다음과 같은 자바스크립트 코드를 작성합니다:
window.addEventListener('resize', restartAnimation);
function restartAnimation() {
var textElement = document.getElementById('animated-text');
textElement.style.animation = 'none';
textElement.offsetHeight;
textElement.style.animation = null;
}
위의 코드는 브라우저 창 크기가 변경될 때 애니메이션을 재시작하는 함수를 정의합니다. 이 함수는 resize 이벤트를 감지하여 animated-text 요소의 애니메이션을 초기화하고 다시 시작합니다.
결과 확인하기
이제 준비된 HTML, CSS, 자바스크립트 코드를 웹페이지에 포함시킨 뒤 웹페이지를 열어보세요. 텍스트가 파도처럼 움직이는 신선한 텍스트 애니메이션을 확인할 수 있을 것입니다.
결론
이번에는 자바스크립트의 파도 애니메이션을 사용하여 신선한 텍스트 애니메이션을 만들어보았습니다. 이 애니메이션을 통해 웹사이트나 웹 애플리케이션에 독특하고 시선을 사로잡는 효과를 제공할 수 있습니다. 독자들도 이러한 애니메이션을 활용하여 자신만의 창의적인 텍스트 애니메이션을 만들어보세요!