iTyped.jsでタイピングしているようなアニメーションを簡単に導入しよう

2021.04.15
昨今、WEBサイトで文字を表示する際にアニメーションが使われていない事の方が珍しくなってきています。
文字のフェードイン(フワッと徐々に表示)やスライドイン(シュッと横から表示)はいろいろなサイトで実装されており(株式会社コルのWEBサイトでも多用しています)、これらのアニメーションで表現の差別化を図るのはなかなか難しいです。

いつもとはちょっと違う表現で文字を見せたい!とお考えの方なら一度は思い浮かべるのが、タイピングしているかのようなアニメーションではないでしょうか?。
タイピングアニメーションをいざ実装しようと考えだすと、「1文字づつアニメーションを適用しないといけない・・・?」「svgを用意しないとダメ・・・?」「それともgifか・・・?」などなど割と気が重くなるような方法ばかり浮かんできますよね。

しかし皆さま、ご安心ください!
とっても使い勝手の良いタイピングアニメーションプラグイン(iTyped.js)を発掘してきましたので、ご共有です!
オプションの説明も記載しておりますので、使い方がいまいち分からないという方もぜひお読みください。



iTyped.jsとは?

iTyped.jsとは、画面に文字を打ち込んでいる時のようなアニメーションを手軽に導入できるプラグインです。
ちなみにGitHubのStar数は2.2kといったところで、最終更新日は2021年4月時点で5ヶ月前です。

プラグイン作者曰く、
  1. 2KBと超軽量
  2. jQueryに依存しない作り
になっているそう。とってもいい感じですね。

実際のアニメーションは、デモをご参照ください。
colleのサイトのトップページの中盤でも利用していますよ。

ちょっと残念なところ

完璧そうに思えるiTyped.js…
実際にとても手軽に素敵なアニメーションを適用できるので申し分ないのですが、1つだけちょっぴり残念なところがございます。

それは、ローマ字をひらがなにする・ひらがなを変換して漢字にするというような打ち込んで変換するタイピングアニメーションの実装は厳しいという点です。

しかし漢字が使えないという訳ではありませんので、漢字を一文字づつ表示したいという場合には全く問題ないと思います。
アルファベットや数字はもちろんですが、ひらがなだけ・カタカナだけなんていう場合もとっても良い感じになると思いますので迷ったら一度試してみても良いかもしれません。

導入方法

npmやyarnをつかってのインストールが可能です
CDNも用意されているので、至れり尽くせりだなと思ってしまいました。
// npmでインストールする
npm install ityped
// yarnでインストールする
yarn add ityped
<!-- CDNを利用する -->
<script src="https://unpkg.com/ityped@1.0.3"></script>

続いて、タイピングアニメーションを適用させたいDOMを用意します。
何もないところに表示させたい場合は、要素内に文字を入れないでおきましょう。
js経由でアニメーションを付与するため、idにjsセレクタを付与しておくと良いと思います。

<!-- アニメーションを適用させたいDOM -->
<p id="js-typing-target"></p>
では続いてJavaScriptを書いていきましょう。
以下の記述をhtmlが読み込んでいるjsファイルに記載すれば、動かせます。

ityped.init(document.querySelector('#js-typing-target'), {
  strings: ['表示したい文字をここに書く'],
  startDelay: 200, // アニメーション開始までの遅延時間をmsで指定
  typeSpeed: 70, // タイピング速度をmsで指定
  loop: false, // 繰り返しアニメーションを行うか
  showCursor: false, //カーソルを表示するか
});
指定できるオプションは他にもありました。

  1. backSpeed: タイプしたものを消す動きも入れることができます。msでスピードを指定できます。

  2. backDelay: 消す動きを開始するまでの遅延時間もmsで設定できます。

  3. placeholder: inputタグなどのplaceholderにこのアニメーションを適用させたい場合は、trueを指定してください。

  4. disableBackTyping: 文字を消す動きを無効にするか設定します。
    ※ こちらをtrueにすると、loop(文字表示消去を繰り返す)をtrueにしていても[文字を消去しない]設定が適用されますのでご注意ください。

  5. cursorChar: 通常文字を入力する時、表示されるカーソル|を、好きな文字に変更できます。
    ※ こちらはstringで値を設定してください。

いろんなオプションがありますが、個人的にはplaceholderへアニメーション適用できるというところに一番感動しました。
フォームのplaceholderが動いていたら、目が行きますし、どう入力すべきかわかりやすいですし、採用したいですね〜。

まとめ

iTyped.jsを利用すれば、とっても簡単にタイピングしているかのようなアニメーションを付与できることが分かりました。
npm・yarnでのインストールまたはCDNの読み込みをし、対象のDOMに対してjsからアニメーションのオプションを設定すれば、ノンストレスでタイピングアニメーションを適用できます。

さいごに

最後までお読みいただきありがとうございます。
株式会社コルでは、今後も細部まで凝りたい!とお考えの皆さまのお力になれるような発信をしていきます。
WEB制作に関するお困りごとなどございましたら、まずはお気軽にお問い合わせページからご連絡をお願いします。
このエントリーをはてなブックマークに追加