【Typed.js】タイプライターのように文字が打ち出されるエフェクト

こんにちは、ハル@haru_elpisです。

タイピングアニメーションを表現できる「jQuery Typed.js」の紹介です。

Typed.jsの使い方

ダウンロード

JavaScript Animated Typing with Typed.js | by Matt Boldt

ダウンロードした「Typed.js」ファイルをjsフォルダなど任意の場所へ移動しておきましょう。

「Typed.js」のファイルは「lib」フォルダの中の物を使います。

head

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="typed.js"></script>

HTML

<span class="element"></span>

JavaScript

<script>
    $(function(){
        new Typed(".element",{
            strings: ["Hello! ここここ","ここにコメント","タイピング風な表現。"],
            typeSpeed: 100,
            loop: true,
        });
    });
</script>