解説コードを読んでみよう
このサンプルでわかること
- jQuery プラグインの読み込み方と使い方の基本
- プラグインに「オプション」を渡して動きを変える方法
使っているファイル
- index.phpデモのページ（HTML と、プラグインを動かす JavaScript）
- js/typed.jsTyped.js 本体（配布されているものをそのまま使用）
- jqueryjQuery 本体（サイト共通で読み込み済み）
1. プラグインを読み込む
jQuery のプラグインは、jQuery 本体を読み込んだあとに読み込みます。順番が逆だと「$(...).typed is not a function」というエラーになります。
<script src="js/jquery.min.js"></script> <!-- 先に jQuery 本体 -->
<script src="js/typed.js"></script> <!-- そのあとにプラグイン -->2. 文字を表示する場所を用意する
アニメーションの文字が入る「空の箱」を HTML に置いておきます。ここでは class="element" という目印をつけた span です。
<div class="typed-demo">
<p class="typed-demo__screen"><span class="element"></span></p>
<p class="typed-demo__note">文字が1文字ずつ打ち込まれ、消えて、次の文が表示されるのを繰り返します。</p>
</div>3. プラグインを実行する
$(".element") で箱を探し、.typed({ ... }) でプラグインを実行します。{ } の中がオプション（設定）です。
<script>
$(function(){
$(".element").typed({
strings: ["Hello, World!", "タイピング風に表示します。", "jQuery のプラグインで簡単に作れます。"],
typeSpeed: 100, // 1文字を打つ速さ（ミリ秒）
startDelay: 100, // 打ち始めるまでの待ち時間
backSpeed: 10, // 1文字を消す速さ
loop: true // くり返す
});
});
</script>| オプション | 意味 | このサンプルの値 |
|---|---|---|
strings | 順番に表示する文章の配列 | 3つの文章 |
typeSpeed | 1文字を打つ間隔（ミリ秒）。小さいほど速い | 100 |
startDelay | 打ち始めるまでの待ち時間（ミリ秒） | 100 |
backSpeed | 1文字を消す間隔（ミリ秒） | 10 |
loop | 最後まで表示したら最初に戻るか | true（くり返す） |
$(function(){ ... }); は「ページの HTML を読み込み終わってから中身を実行する」という jQuery の決まり文句です。これがないと、まだ存在しない .element を探してしまい、何も起きません。
4. カーソルを点滅させる（CSS）
Typed.js は文字の後ろに <span class="typed-cursor">|</span> を自動で付けます。CSS のアニメーションで点滅させると、本物の入力画面らしくなります。
.typed-demo__screen { font-size: clamp(22px, 4vw, 34px); font-weight: 900; min-height: 3em; display: flex; align-items: center; justify-content: center; text-align: center; margin: 10px 0; }
.typed-demo__note { text-align: center; color: #6b7385; font-size: 14px; margin: 0; }
.typed-cursor { opacity: 1; animation: blink .7s infinite; font-weight: 400; }
@keyframes blink { 50% { opacity: 0; } }strings の文章を自分の好きな言葉に変えたり、typeSpeed を 30 や 300 にしたりして、動きがどう変わるか試してみましょう。