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

この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。

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

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

エフェクトの種類もかなり用意されているのでデモを見てるだけでも楽しかったです。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