Typewriting

위처럼 버튼을 누르면 글자가 일정 시간마다 하나하나 나오는 애니메이션을 만들어보자.

<div>
        <button id="btn">버튼</button>
        <h1 id="text">abcde</h1>
</div>

var h1태그 = document.getElementById('text');
var 글자 = document.getElementById('text').innerHTML;

먼저, 편하게 js를 작성하기 위해 h1태그와 안에 글씨를 각각 변수로 만들고,

 

$('#btn').on('click',function() {
            // $('#text').html('');
            h1태그.innerHTML = '';

            for (let i = 0; i < 글자.length; i++) {
                setTimeout(function() {
                    h1태그.innerHTML = h1태그.innerHTML + 글자[i];
                }, 500 * i);
            };
});

위처럼, 버튼을 클릭하면 먼저 h1태그의 html을 다 지우고,

반복문을 글자의 길이만큼 반복하며 setTimeOut 함수로 h1의 html태그에 글자를 순서대로 더하게끔 만들고 시간은 0.5초 1초 1.5초 이렇게 늘어나면서 생겨야하니까 500 * i를 써주면 된다.

 

함수화하면 다른 곳에 응용화하기 쉽다.

 

만약, 한글이 한글자씩 타이핑 되면 ㄱ 가 강 ㄴ 나 남    이런 식으로, 한글자씩 늘어나게끔 만들면 된다.