今回ご紹介するのは、まるでその場で誰かが文章を入力しているかのようにテキストを表示するjQueryプラグイン「jquery.jaticker.js」です。

サンプルを作ってみました。

→ jQueryプラグイン「jquery.jaticker.js」サンプル

設置方法も簡単です。使用方法は続きをご覧下さい。


【使用方法】

まずはこちらの本家のサイトから、jquery.jaticker_1.0.0のcss ファイルと js ファイルをダウンロードします。

<head>部分にjsファイルとcssファイルを設定します。パスに注意しましょう。

</body>直前にJavaScriptを設定します。

<body>部で対象となるId名で要素を呼び出すと、ワープロで打っているかのようにテキストが表示されます。

ひらがなを変換して漢字を表示させているようにみせるには、ruby 要素を使います。ruby 要素に囲まれた中に rt 要素があると、それを読みとして使って日本語変換しているように表示されます。

サンプルのソースは以下の通りです。どうぞご参考まで。

この記事と関連してると思われる記事: