しゃべってるみたいにテキスト文字が出てくる動き【jquery】

セリフっぽい枠の表示ってありますよね。
こんなやつ⬇

あおのり

こんにちは！あおのりへちまです！
あるよね〜〜〜〜、吹き出しのテキスト！

これをもうちょっとセリフっぽい表現・動きができないかなぁ？
と思い、探してみるとありました〜
そんな時にピッタリのjqueryプラグイン！typetypeがあったので使ってみました。

使用プラグインは：typetype
DEMOはこちら：おめタンのおめでとうって言わせて！

基本の使い方は、セレクタ指定してオプション値を設定すればOK！

$(セレクタ).typetype('テキスト文字',{e:エラー率, t:スピード});

それでは、しゃべってるみたいにテキスト文字が出てくる動きを解説します。

1文字ずつ現れるとセリフっぽい

LINEのトーク画面の吹き出し表現で見慣れていると思いますが、
吹き出し型のテキストボックスは、しゃべっている感じがしますよね。

この吹き出し表現をさらにセリフっぽく表現するために
セリフテキストを1文字ずつ表示してみます。

はい、しゃべってる感がアップしましたね。
こちら、jqueryプラグインのtypetypeを使用しました。

typetypeで、できること

jqueryプラグインのtypetypeでできることは、

など、わりと多機能です。
テキスト文字を1文字ずつスピードを調整して表示できれば、OKですが、

• テキスト文章が全部表示されたらcallback処理
• メソッドチェーンでメソッド連結が可能

は、便利ですね。

おめタンのおめでとうって言いたい！でtypetypeを使ってみた

jqueryプラグインtypetypeをおめタンのおめでとうって言わせて！で使ってみました。

使い方は、HTML要素を指定して、テキストとエラー率、表示スピードを設定します。

$(".serif").typetype('今日、何か良いことあったでしょ？',{e:0, t:80});

うん！
吹き出し枠内のテキストが1文字ずつ表示されて、
しゃべってる感がアップしました！