Colin's Blog
자바스크립트로 타이핑 효과 애니메이션 만들기

이번에는 자바스크립트를 사용하여 타이핑 효과 애니메이션을 만들어보겠습니다. 이 애니메이션은 웹사이트나 블로그의 제목, 설명 등에 활용될 수 있습니다. 또한, 자바스크립트를 활용하여 동적인 요소를 웹 페이지에 추가하는 예제로도 사용할 수 있습니다.

필요한 기술

HTML 구조 설정

먼저, HTML 파일을 만들고 다음과 같이 구조를 설정합니다.

<!DOCTYPE html>
<html>
<head>
  <title>타이핑 효과 애니메이션</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <h1 id="typing-animation"></h1>

  <script src="script.js"></script>
</body>
</html>

이 예제에서는 h1 요소를 사용하여 타이핑 효과 애니메이션을 표시합니다. id 속성을 사용하여 자바스크립트에서 요소를 선택할 수 있도록 설정합니다.

CSS 스타일 설정

다음으로, CSS 파일을 만들고 다음과 같이 스타일을 설정합니다.

#typing-animation {
  font-family: Arial, sans-serif;
  font-size: 24px;
  white-space: nowrap;
  overflow: hidden;
  border-right: .15em solid #000;
  animation: typing 2s steps(30, end) infinite;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

이 CSS 코드는 typing-animation 이라는 id를 가진 요소에 타이핑 효과 애니메이션을 적용합니다. animation 속성으로 typing 애니메이션을 2초 동안 실행하고, steps(30, end)로 애니메이션을 30개의 단계로 나누어 효과를 생성합니다.

자바스크립트로 타이핑 효과 애니메이션 구현

이제, 자바스크립트 파일을 만들고 다음과 같이 타이핑 효과 애니메이션을 구현합니다.

const text = '타이핑 효과 애니메이션 예제입니다.';
let index = 0;

function typewriter() {
  document.getElementById('typing-animation').innerHTML = text.slice(0, index++);
  if (index <= text.length) {
    setTimeout(typewriter, 100);
  }
}

typewriter();

이 자바스크립트 코드는 text 변수에 표시할 내용을 저장하고, index 변수를 사용하여 문자열을 순차적으로 타이핑합니다. typewriter 함수는 innerHTML 속성을 사용하여 typing-animation 요소에 타이핑 중인 텍스트를 업데이트하고, setTimeout 함수를 사용하여 100밀리초마다 typewriter 함수를 호출하여 애니메이션을 생성합니다.

실행 결과

위의 코드를 실행하면, 타이핑 효과 애니메이션이 화면에 나타납니다. 문자열이 한 글자씩 순차적으로 타이핑되는 모습을 확인할 수 있습니다.

마무리

이번 글에서는 자바스크립트를 활용하여 타이핑 효과 애니메이션을 만드는 방법을 알아보았습니다. 이를 응용하여 웹사이트나 블로그에서 텍스트 요소에 동적인 효과를 추가할 수 있습니다. 추가적으로 CSS를 수정하여 원하는 스타일을 적용할 수도 있습니다. 이 예제를 활용하여 자신만의 창의적인 애니메이션을 만들어 보세요!

© 2018 Colin. All rights reserved.