Typewriter Typing 효과로 글자 표시

글자가 써지는 효과를 적용하기 위해 몇몇 방법을 적용해 본 결과, css 트랜지션이나 에니메이션만으로는 글자 한 자 한 자가 써지는 듯한 효과 적용은 무리가 있었다. 그러던 중 찾은 스크립트를 통한 적용 방법.

방법은, 특정 id를 가진 div를 하나 만들어 준 다음,

<div id="demo"></div>

그 안에 쓰여질 글자를 스크립트로 문장을 만들어 넣어주기만 하면 끝.

<script>
    _$("demo", 100, 800)
        .type("Hello! ").wait(1000).speed(100)
        .type("This is ").wait(300).speed(100)
        .lineBreak()
        .type("Typing Javascript", { 
            fontWeight: "bold", 
            color: "black",
        }).speed(40)
        .delete("Javascript").wait(1000).speed(200)
        .type("JS", { 
            fontWeight: "bold", 
            color: "black",
        }).wait(1000)
        .lineBreak();
</script>

실행 예 :

Script Snippet