タイピングアニメーションを表現できるTyped.js

2016年12月17日Javascript

jQueryを利用したタイピングアニメーションを表現できるTyped.jsです。
Github(https://github.com/mattboldt/typed.js/)で発見しました。特に、機能的というよりも、デザイン面で、応用すればシャレたことができそうな感じがします。

実装は簡単で、まずは、jquery.jsとtyped.jsが読み込まれていることが必要があります。そして、オプションを設定し、指定したclass又は、IDで表示させるだけです。

<script src="jquery.js"></script>
<script src="typed.js"></script>
<script>
    $(function(){
        $(".element").typed({
            strings: ["Hello! SumiDai.NET", "We are BABYMETAL!!" ,"タイピング風な表現です。"],
            typeSpeed: 100,
            startDelay: 100,
            backSpeed: 10,
            loop: true,
        });
    });
</script>
...

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

設定は下記のようで、コールバックの設定などは用途がわからないので、調べていません。

<script>
    $(function(){
        $(".element").typed({
　　　　 //文字 ,で区切りで1フレーズ。
        strings: ["These are the default values...", "You know what you should do?", "Use your own!", "Have a great day!"],
        //タイピングスピード
        typeSpeed: 0,
        //スタートまでの時間
        startDelay: 0,
        //文字が戻る時間
        backSpeed: 0,
        //1フレーズが表示され、次に文字がもどりにかかるまでの時間
        backDelay: 500,
        //ループ
        loop: false,
        //ループのカウント
        loopCount: false,
        //カーソルのありなし
        showCursor: true,
        //カーソルにする文字
        cursorChar: "|",
        // attribute to type (null == text)
        attr: null,
        // call when done callback function
        callback: function() {},
        // starting callback function before each string
        preStringTyped: function() {},
        //callback for every typed string
        onStringTyped: function() {},
        // callback for reset
        resetCallback: function() {}
        });
    });
</script>

WordPressで利用するときは、

function load_scripts() {
        wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/jquery-2.1.3.min.js', array() );
        wp_enqueue_script( 'typed', get_template_directory_uri() . '/js/typed.js', array() );
}
add_action( 'wp_enqueue_scripts', 'load_scripts' );

のようにfunctions.phpでjs読み込むのもよいかもしれないが、全体に読み込まれてしまうので、一部だけの使用であるのなら、typed.jsだけ直接、設置したページで読み込んでもよいと思います。

ただ、レスポンシブサイトの場合は、この部分だけ縮小しないので、工夫が必要です。