[Javascript] 타이핑 애니메이션

이렇게 한글자씩 적어나가는 타이핑 애니메이션을 만들어보았다.

 

HTML

  <div class="section">

    <p class="text"></p>

  </div>

 

CSS

.section{

  margin-top: 300px;

}

.section p{

  text-align: center;

  font-size: 60px;

}

 

 

JAVASCRIPT

const typingText = "안녕하세요~ 글자 타닥타닥";

const text = document.querySelector(".text");

let i = 0;

function typing(){

    if (i < typingText.length) {

    let target = typingText.charAt(i);

    text.innerHTML = text.innerHTML + target;

    i++;

    console.log(target)

    }

}

setInterval(typing, 100)

 

우선 타이핑될 글자를 변수로 담아놓고 함수에 조건문으로 타이핑글자수만큼만 실행되게 조건을 짠다. 그리고 charAt이라는 함수를 쓴다.

* charAt이라는 함수는 글자의 i값만큼 글자 한 자씩 반환해준다.

그리고 text에 반환된 글자를 하나씩 붙여주는 방법으로 했다.

그리고 setInterval로 typing함수를 반복시켜주었다.

 

코드를 짜고 나니까 상당히 간단했는데 저렇게 생각하는 과정이 너무 힘들고 시간도 되게 많이 걸렸다. 원래 한글자씩 쓰고 지우는거까지 완성해서 올릴려고 했는데 생각회로가 잘 안돌아가서 좀 더 고민하고 보안해서 다음에 다시 올려봐야겠다.