文字にタイピングアニメーションを加えるためのJavaScriptライブラリ「ityped」を紹介します。
あたかもタイプライターで文字を打っているかのように表現できるライブラリで、設置も簡単ですのでTOPページの見出しなどに動きを加える際に使ってみてはいかがでしょうか。
💡 itypedとは
jQuery不要で動作する軽量（わずか2KB）のタイピングアニメーションライブラリです。指定した文字列を順番にタイプライター風に表示し、バックスペースで消してから次の文字列に進みます。
設置方法
npm / yarn でインストールする方法と、CDNで読み込む方法があります。
方法① npm / yarnでインストール
npm install itypedまたは
yarn add itypedソースコードはityped公式リポジトリ（GitHub）で公開されています。
方法② CDNで読み込む
ブラウザから直接読み込む場合は、以下のCDNを使用します。
<script src="https://unpkg.com/ityped@1.0.3"></script>WordPressテーマでの読み込み方法
WordPressの独自テーマでは functions.php に下記のように記載します。
<?php
function theme_name_scripts() {
//jQueryの読み込み
wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/jquery-3.4.1.min.js', '3.4.1', false );
wp_enqueue_script( 'style-js', get_template_directory_uri() . '/js/style.js', array( 'jquery' ), '1.0.0', false );
//CDNの読み込み(ityped) ※jQuery不要のため依存なし
wp_enqueue_script( 'ityped', 'https://unpkg.com/ityped@1.0.3', array(), '1.0.3', false );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
?>💡 ポイント
itypedはjQuery不要のライブラリのため、wp_enqueue_script の第3引数（依存関係）は array()（空配列）で問題ありません。jQueryとは独立して動作します。
基本的な使い方
HTMLの編集
タイピングアニメーションを表示したい箇所に以下のコードを加えます。
<span id="ityped"></span>span タグに任意の id を付けるだけで、JavaScriptから文字を流し込む対象になります。
JavaScriptの編集
以下のコードを style.js に記載します。
document.addEventListener('DOMContentLoaded', function () {
ityped.init(document.querySelector('#ityped'), {
strings: ['to create...', 'provide service...', 'do management...', 'Mashiro Mirise !!'],
typeSpeed: 100,
backSpeed: 50,
startDelay: 3000,
backDelay: 2000,
loop: false,
showCursor: true,
placeholder: false,
disableBackTyping: false,
cursorChar: '|',
onFinished: function () {},
});
});⚠️ jQuery不要です
itypedはバニラJavaScript（素のJavaScript）で動作するため、jQuery(document).ready() ではなく document.addEventListener('DOMContentLoaded') で十分です。ityped.init() の中でもjQueryは一切使いません。
コピペで一通り稼働しますが、strings の中のテキストはご自身のサイトに合わせて変更してください。
オプションについて
itypedには以下のオプションがあります。よく使うものをまとめました。
strings | 表示するテキストの配列 |
typeSpeed | タイピング速度（デフォルト: 100ms） |
backSpeed | バックスペース速度（デフォルト: 50ms） |
startDelay | 入力が始まるまでの待ち時間（デフォルト: 500ms） |
backDelay | バックスペースが始まるまでの待ち時間（デフォルト: 500ms） |
loop | ループさせるか（デフォルト: false） |
showCursor | カーソルを表示するか（デフォルト: true） |
placeholder | input要素のプレースホルダーに書き込むか（デフォルト: false） |
disableBackTyping | 最後の文字列でバックスペースを無効にするか（デフォルト: false） |
cursorChar | カーソルとして表示する文字（デフォルト: |） |
onFinished | loop: false の場合、最後の文字列を打ち終えたときのコールバック |
💡 弊社の設定のポイント
startDelay: 3000 でページ読み込みから3秒後にタイピング開始、loop: false で最後の文字列「Mashiro Mirise !!」を表示したら停止する設定です。ループさせたい場合は loop: true に変更してください。
カーソルのCSSカスタマイズ
itypedはカーソル要素に .ityped-cursor クラスを付与します。点滅アニメーションを加えるには以下のCSSを追加します。
.ityped-cursor {
font-size: 2.2rem;
opacity: 1;
animation: blink 0.3s infinite;
animation-direction: alternate;
}
@keyframes blink {
100% {
opacity: 0;
}
}まとめ
✅ この記事で行ったこと
① itypedの設置方法（npm / CDN）
② WordPressテーマでの functions.php への組み込み
③ 基本的なHTML・JavaScriptの記述
④ 全オプションとカーソルCSSの紹介
弊社ではこのタイピングアニメーションをTOPページの見出しに使用しています。
固定の文字列であれば数行のコードで導入できますので、サイトに動きを加えたい方はぜひ試してみてください。
この記事を書いた人
