テキストアニメーションが簡単に実装出来るjsプラグイン「Typed.js」



テキストアニメーションのjQueryプラグインの紹介です。

まるでタイピングしているように文字が動くテキストエフェクトが使われているWebサイトをたまに見かけますが、ついつい見ちゃいませんか?コマンドライン系のライブラリのホームページにはよく見受けられるような気がします。

そんな事が簡単に実現出来るjavascriptライブラリが" Typed.js "です。

See the Pen yOXBMw by cupof (@cupof-github) on CodePen.


Typed.jsのインストール

Typed.jsのインストールにはサイトからダウンロードする他に、bowerからのインストールに対応しています

# コマンドラインからbowerを使ってインストールする場合
bower install typed.js


Typed.jsの使い方

Typed.jsの使い方もかなりシンプルで、表示させるターゲット(class, id, element )を指定して数行の処理を書くだけです。

<script src="jquery.js"></script>
<script src="typed.js"></script>

<script>
// id="title"に表示
$("#title").typed({
     strings: [
       'アニメーションが表示されるテキスト'
      ],
     typeSpeed: 1 // アニメーションのスピード
});

// 文に改行を含める場合
$("#typed").typed({ strings: ["この文は\n改行されます."] });

</script>

<!-- アニメーションが表示されるid -->
<div id="title"></div>

<!-- 改行をする場合はstyleを追加します -->
<div id="typed" style="white-space:pre"></div>


strings内の配列にテキストを追加すれば、複数のテキストを表示させることも可能です。

$("yourElement").typed({
     strings: [
       '1番目に表示',
       '2番目に表示',
       '3番目に表示',
       ],
     typeSpeed: 1
});


また、Pause(一時停止)機能も備わっておりテキスト内のスピードを部分的に遅らせたりも出来ます。

$(".element").typed({
   // ^1000 (ms) => 1秒間
   strings: ["1秒間 ^1000 停止しました。"] // 部分的に1秒間停止
  });
});


Summary

以上がTyped.jsの紹介でした。

上で紹介した事以外にもオプションでloopさせたり、アニメーションが終わった後にコールバック処理をさせることも出来ます。

サイト内で説明等の目立たせたいところに使うと便利そうですね。また、文字のオーバーライド(上書き)も自動的にされるので既存のサイトへの導入の心配も無さそうです。

GitHub: mattboldt/typed.js

 

この記事のカテゴリ
プログラミング

この記事のタグ