タイピングアニメーション

2021年11月5日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は、まるでタイピングしているように徐々に文字が表示される「jaticker」というjQueryプラグインを紹介します。

使い方

① jatickerにアクセスしてzipをダウンロード

② 解凍して出てきたCSSとJSを、jQueryより下で読み込む

<script src="https://code.jquery.com/jquery-1.12.4.min.js" ></script>

<script type="text/javascript" src="js/jquery.jaticker_1.0.0.js"></script>
                            
<link rel="stylesheet" href="css/jquery.jaticker_1.0.0.css" type="text/css">

③ 以下のスクリプトを記述

$('#jaticker-1').jaticker();

④ 実装

<div id="jaticker-1">ケミスト アンド ファーマシスト</div>

漢字とふりがな

<ruby>タグを使います。

<ruby>と</ruby>の中に漢字とふりがなを入れて、さらにふりがなを<rt>と</rt>ではさみます（説明下手）

<div id="jaticker-2">
<ruby>福岡<rt>ふくおか</rt></ruby>
の
<ruby>薬局<rt>やっきょく</rt></ruby>
コンサルティングです
</div>

まとめ

ちゃんとローマ字入力してから変換されていて、芸が細かいです！

トップページに 実装 じっそう してみたいなあ