ETC - 2021. 5. 17.

Javascript Typing Animation

안녕하세요 TriplexLab 입니다.

Typing Animation

오늘은 Javascript Typing Animation에 관해서 살펴보도록 하겠습니다.
프론트개발자분들이 응근히 자주 사용하는 Typing Animation 코드를 소개합니다.

Typing Animation 코드

<h1 class="txt"></h1>

@keyframes cursor {
    to {
        border-color: transparent;
    }
}

.txt {
    display: table-cell;
    vertical-align: middle;
    border-right: 0.05em solid #F81857; 
    animation: cursor 0.5s ease infinite;
}

const content = 'javascript Typing 가지고 놀기!'
const txt = document.querySelector('.txt');
let n = 0;

const typing = function() {
    txt.innerHTML += content[n++]; //.txt엘리먼트에 위에 content의 변수에 저장한 문자를 순차적으로 뿌리겠다.
    if(n > content.length) { // content의의 변수 길이가 넘으면 제안을 설정한다.
        txt.innerHTML = ''; // .txt엘리먼트에 위에 빈문자를 뿌리겠다.
        n = 0;              // n번째를 0으로 초기화 하겠다.
    }
};

setInterval(typing, 200);