Lettering.jsを併用して、任意のテキストにCSS3のアニメーションエフェクトを実装するスクリプト・textillate.js

ちょっと面白かったのでメモ的に。タイポグラフィ用のライブラリ、Lettering.jsを併用して、テキストにCSS3によるアニメーション効果を容易に与える事が出来る、というスクリプトのご紹介。

使いどころは限定されますが、動きが面白かったのでメモ的に。以前ご紹介したLettering Animateを少し進化させたような感じ。

textillate.js

エフェクトの種類もかなり用意されているのでデモを見てるだけでも楽しかったです。lettering.jsはjQueryのプラグインなので必然的にtextillate.jsもjQuery依存となります。

lettering.jsで1文字1文字のエフェクトにタイムラグを発生させる事が出来ます。

$('.foo')
      .fitText(0.5)
      .textillate({ in: { effect: 'flipInY' }});

オプションでエフェクト等をセッティングします。

<p class="foo" data-in-effect="rollIn">bar</p>

カスタムデータ属性でも指定可能。

ライセンスはMITです。デモと詳細は以下よりどうぞ。

textillate.js