[javascript] 자바스크립트를 사용하여 파도 효과를 가진 텍스트 애니메이션 만들기

01 Dec 2023

javascript

이번 포스트에서는 자바스크립트를 사용하여 파도 효과를 가진 텍스트 애니메이션을 만드는 방법을 알아보겠습니다. 이 효과는 웹사이트나 앱에서 텍스트를 동적으로 표현하는 데 사용할 수 있습니다.

요구 사항

HTML 및 CSS 기본 지식
자바스크립트 기본 지식

시작하기 전에

먼저, HTML 문서에 효과를 적용할 요소를 생성해야 합니다. 예를 들어, <h1> 태그를 사용하여 애니메이션을 적용할 텍스트를 작성할 수 있습니다.

<h1 id="animated-text">Hello, World!</h1>

텍스트를 원하는 대로 스타일링 하고, 효과를 적용할 요소에 id 속성을 추가해주세요.

스타일링

다음으로, CSS를 사용하여 요소에 스타일을 지정해야 합니다. 이 애니메이션에서는 파도 효과를 만들기 위해 @keyframes 를 사용하여 키프레임을 정의할 것입니다. 자세한 내용은 아래의 예시 코드를 참고해주세요.

@keyframes wave {
  0% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(1.2);
  }
  100% {
    transform: scaleX(1);
  }
}

#animated-text {
  animation-name: wave;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes 를 사용하여 wave 기본값과 중간값, 최종값에서 어떤 스타일을 적용할지 설정할 수 있습니다. animation-name 을 사용하여 애니메이션의 이름을 지정하고, animation-duration 을 사용하여 애니메이션의 지속 시간을 설정할 수 있습니다. animation-iteration-count 를 infinite 로 설정하면 애니메이션이 무한 반복됩니다.

자바스크립트

마지막으로, 자바스크립트를 사용하여 애니메이션을 시작해야 합니다. 아래의 예시 코드를 참고해주세요.

const animatedText = document.getElementById("animated-text");

function startAnimation() {
  animatedText.style.animationPlayState = "running";
}

function stopAnimation() {
  animatedText.style.animationPlayState = "paused";
}

animatedText.addEventListener("mouseover", startAnimation);
animatedText.addEventListener("mouseout", stopAnimation);

위 코드에서는 mouseover 와 mouseout 이벤트 리스너를 사용하여 마우스를 오버하면 애니메이션이 시작되고, 마우스를 벗어나면 애니메이션이 멈추도록 설정했습니다.

자바스크립트에서 getElementById 를 사용하여 요소를 가져온 뒤, addEventListener 를 사용하여 이벤트 리스너를 추가합니다. animationPlayState 를 running 으로 설정하여 애니메이션을 시작하고, paused 로 설정하여 애니메이션을 멈출 수 있습니다.

결론

이제 자바스크립트를 사용하여 파도 효과를 가진 텍스트 애니메이션을 만들 수 있게 되었습니다. 이 효과를 웹사이트나 앱에 적용하여 텍스트를 더 동적으로 표현해보세요!

참고 자료

W3Schools - CSS Animations