「iTyped.js」の使い方！【分かりやすく解説】

どうも。みずかず(@mizukazu_1)です。

JSライブラリの「iTyped.js」の紹介をします。

オシャレなポートフォリオサイトなどでよく見かけるのが
文字が1文字ずつタイピングのように表示されるアニメーションです。

この「iTyped.js」というライブラリを使うと
そんなカッコいいタイピングアニメーションを少ないコードで簡単に実装することが出来ます。

それでは紹介していきます！

iTyped.jsとは

冒頭でも軽く紹介しましたが、タイプライターアニメーションを実装することが出来るJSライブラリになります。
jQueryなどの他のライブラリに依存する事はなく、iTyped.js単体で動作します。

また、サイズが2.3KBと超軽量。

手軽にサクッと使えるライブラリです。

ちなみに使い方もすごい簡単です。

デモページもリンク貼っておきますね。

デモページ

iTyped.jsの使い方

jsファイルのダウンロードから読み込みまで

まず下記のGithubから「iTyped.js」をダウンロードしてきます。

Github

デモページの「GET STARTED NOW!」ボタンからも飛ぶことが出来ます。

jsファイルをダウンロードしたら自分のプロジェクトの任意の場所に配置します。
それをHTMLのbodyから読み込むことで使う準備は完了です。

test.html

<body>
   <script src="iTyped.js"></script>
</body>

ここまでは他のライブラリを使用した事のある人には何てことないと思います。
jQueryもダウンロードして使用する場合には同じ手順ですしね。

アニメーションさせたい場所にid属性を付与

タイプライターアニメーションさせたい場所にid属性を付与します。

test.html

<span id="ityped" class="ityped"></span>

このidを後々jsから取得してアニメーションを加えます。
同時にcssも付与させているのですが、これは点滅時のカーソルを変更する際に使用します。

JavaScriptからアニメーションを設定する

test.js

ityped.init('#ityped', {
  strings: ['これはテストです。'],
  typeSpeed: 100,
  backSpeed: 80,
  startDelay: 500
});

新しいjsファイルを作成して上記のようにアニメーションの設定をします。

各プロパティの説明

5つのプロパティについて説明します。
これ以外にもたくさんありますので随時追加していきますね！

strings

表示させたい文字を設定します。
配列になっているのでカンマで区切る事で順番に表示させることが出来ます。

typeSpeed

これは表示させるスピードです。
数字が大きいほどゆっくりになります。

backSpeed

文字が戻る時のスピードです。
こちらも数字が大きいほどゆっくりになります。

startDelay

アニメーションが始まるまでの時間です。
数字が大きいほど遅れてアニメーションが始まります。

loop

アニメーションをループさせるかどうかの指定になります。
初期値はtrueです。
true：アニメーションのループ再生有り
false：アニメーションのループ再生無し

どういった所で使用するか

やはりユーザーさんが一番最初に目にするトップページなどに使用するのが良いと思います。
ファーストビューで心を惹きつける事が出来ます。

僕の使用例

僕の場合はポートフォリオに使用しています。

Mizukazu Portfolio

写真の赤枠部分です。
参考までに以下にソースを載せておきます。

test.js

ityped.init('#ityped', {
  strings:['Welcome to Mizukazu Portfolio!'],
  startDelay: 200,
  typeSpeed: 130,
  loop: false,
  cursorChar: ""
});

最後に

今回は手軽にタイプライターアニメーションを実装出来る「iTyped.js」を紹介しました。
とても簡単だったと思います。

高クオリティのアニメーションをサクッと実装できるのは本当にありがたいですよね。
お手軽にサイトを1ランクグレードアップさせることが出来ます。

このライブラリは本当に便利なので一度は使ってみてもらいたいです。

もしこの記事の説明で分からない事がありましたら直接お問い合わせから連絡してもらっても大丈夫です！

みずかず

最後まで読んでいただきありがとうございます！