자바스크립트를 사용하여 신선한 텍스트 애니메이션을 구현하는 방법을 소개합니다. 이 애니메이션은 파도처럼 텍스트가 부드럽게 움직이는 효과를 가지며, 웹사이트나 앱에서 시각적인 효과를 더해줄 수 있습니다.

HTML 구조 설정

<div class="wave-container">
  <h1 class="wave-text">Hello, World!</h1>
</div>

위의 예시에서는 wave-container라는 클래스를 가진 div 요소 안에 wave-text라는 클래스를 가진 h1 요소가 있습니다. 이러한 구조를 가진 HTML을 작성합니다.

CSS 스타일 설정

.wave-container {
  position: relative;
}

.wave-text {
  position: relative;
  display: inline-block;
  animation: wave-animation 2s linear infinite;
}

@keyframes wave-animation {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0);
  }
}

위의 CSS 코드는 .wave-container 클래스의 div 요소를 상대적으로 위치시킵니다. .wave-text 클래스의 h1 요소는 인라인 블록으로 표시되며, wave-animation이라는 이름의 애니메이션을 2초간 선형으로 반복합니다. @keyframes를 사용하여 애니메이션의 키프레임을 정의하고 transform 속성을 사용하여 텍스트를 X축으로 이동시킵니다.

자바스크립트 구현

const text = document.querySelector('.wave-text');

text.addEventListener('mouseover', () => {
  text.classList.add('animate');
});

text.addEventListener('animationend', () => {
  text.classList.remove('animate');
});

위의 자바스크립트 코드는 .wave-text 클래스를 가진 요소에 대해 마우스 오버 이벤트를 추가합니다. 마우스 오버 이벤트가 발생하면 요소에 animate 클래스를 추가하여 애니메이션을 시작합니다. 애니메이션이 종료되면 animationend 이벤트를 통해 animate 클래스를 제거하여 애니메이션을 멈춥니다.

마무리

이제 위의 HTML, CSS 및 자바스크립트 코드를 조합하여 파도 애니메이션을 가진 신선한 텍스트 애니메이션을 구현할 수 있습니다. 이를 웹사이트나 앱에 적용하여 시각적인 효과를 더해보세요.

참고 자료

• MDN Web Docs - CSS Animation
• W3Schools - CSS Animations