[JavaScript / jQuery] 한 글자씩 출현하는 Typewriting 애니메이션 만들기

💡 실습 포인트!

• 오늘은 한 글자씩 보여주는 Typewriting 애니메이션을 만들어보았다.
• Click Me! 버튼을 클릭하면 "Hi! I'm Seoyun. Good to see U." 문구가 한 글자씩 나온다.
• 이번 기능은 setTimeout 함수를 이용해서 만들 수 있었다.

---

💜 HTML

<div class="container"> 
  <button>Click Me!</button>
  <h1>Hi! I'm Seoyun. Good to see U.</h1>
</div>

• 먼저 HTML 파일에 버튼과 나와야하는 문구의 내용을 작성해준다.

💜 CSS

.container {
  width: 100%;
  margin: 50px;
}

h1 {
  width: 100%;
  text-align: center;
  display: none;
}

button {
  display: block;
  margin: 30px auto;
  width: 130px;
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  background: blueviolet;
  color: white;
  font-weight: bold;
  font-size: 20px;
}

• 이번 실습에서 css 는 중요하지 않다. 그냥 취향껏 꾸미면 된다.
  (보라색을 좋아해서 보라색 버튼을 만들었다.)
• h1 태그의 문구들을 바로 보여주어도 되지만 짜잔~ 하는 느낌으로 나오길 원해서 display : none 을 통해 일단 숨겨주었다.

💜 JavaScript

var h1Tag = document.querySelector('h1'); // h1 태그 자체 의미
var h1Letter = document.querySelector('h1').innerHTML; // h1 태그 내용 의미

$('button').click(function(){
    $('h1').show();
    animation(h1Tag, h1Letter);
})

function animation(tag, letter){
    tag.innerHTML = '';
    for(let i=0; i < letter.length; i++){
        setTimeout(function(){
            tag.innerHTML += letter[i]
        }, (i+1)*100)

    }
}

• 오늘의 포인트는 JavaScript 에 있다.
• 버튼을 클릭했을 때, 우선 숨겨두었던 h1 태그가 보여야 하는데, 모든 글자가 한 번에 보이는 게 아니라 앞에서부터 한 글자씩 순차적으로 보여야 한다.
• 따라서 이러한 기능을 가진 animation 이라는 함수를 먼저 만들어주었다.
• animation 함수의 작동방식은 다음과 같다.
  • 우선, 원래 h1 태그 안의 내용을 다 지워서 안보이게 해야 한다. (tag.innerHTML = ' ';)
    이 때, animation 함수의 파라미터로 받을 tag 와 letter 는 JavaScript 문법이므로 jQuery 문법이 아닌 JavaScript 문법으로 작성해주어야 하므로 innerHTML 을 사용하였다.
  • 그 다음, h1 태그 내의 글자 수만큼 for 문을 반복하며, 반복할 때마다 글자를 하나씩 추가할 수 있도록 한다.
    여기까지 생각하면 for 문 안에 tag.innerHTML += letter[i] 를 넣으면 될 것같다는 것까지는 감이 온다.
    그리고 어차피 이것만 써봤자.. 최종단계만 화면에 보여주므로 화면에는 그냥 h1 태그에 내용 넣은 거나 동일하게 나온다.
  • 포인트는 적당한 시간간격을 주면서 추가가 되어야 하는 것!
  • for 문은 아주 빠르게 반복이 진행되므로 시간 부분에 그냥 숫자만 적어버리면 글자가 나오는 시간 사이에 간격이 없다고 보면 된다.
    • 예를 들어, 모든 글자를 1초(1000ms)로 설정했다고 하면 첫번째 글자도 for 문이 돌자마자 약 1초 후, 두번째 글자도 for 문이 돌자마자 약 1초 후 이런 식으로 나오기 때문에 h1 태그의 내용이 거의 동시에 보여지게 된다.
      (헷갈리지 말자. 그 전 글자가 나온 후 1초가 아니다.)
    • 따라서, 글자가 나오는 시간 사이에 간격을 주기 위해 i 를 활용했다.
    • 나의 경우 (i+1)*100 정도로 시간을 설정했는데 이렇게 되면 0번째는 100ms, 1번째는 200ms, 2번째는 300ms... 이런 식으로 되기 때문에 글자가 추가되는 시간 간격이 100ms 가 되는 것이다.