文字を魅力的に動かせる!!テキストエフェクトの定番textillate.jsの使い方

王

2013.03.14

一口にテキストエフェクトとは言ってもアニメーションのほうとビジュアルのほうと両方を融合させたものがあります。

ハリウッドのSF映画なら、必ずと言ってもいいくらい、映画の特徴を的確に捉えた超カッコイイテキストエフェクトをかけますよね！僕はトランスフォーマーのタイトルのような、動きも見た目もSFチックなのが好きです。

そういうのをWeb上でもインタラクティブに出来たら最高ですよね？如何せん、映像分野に比べてテキストエフェクト作成を手助けしてくれるツールが泣くほど少なく、制限も多くて自由性に乏しいがゆえに、個性的なテキストエフェクトを実装しようものなら、とてもじゃないがかなり骨が折れちゃう仕事になりそうです。

でも、それも過去の話！

とは言いたいところだが…まだまだ全然映像分野の足元にも及ばないのが現状…　とは言ってもCSS3のおかげで昔よりは随分良くなってきたのも事実。

今回は、手間暇要らずで容易にテキストエフェクト（アニメーション）を実装する素敵なjQueryプラグインtextillate.jsを紹介したいと思います。

結構色んなエフェクトがあるので、まずはtextillate.jsの公式デモページでエフェクトを確認してみましょう！

僕のほうでもデモを作ってみましたので、下記をご参考下さい。

依存ライブラリを読み込む

textillate.jsは以下のライブラリを使ってますので、まずはこれらを読んであげて下さい。

<link href="assets/animate.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="assets/jquery.lettering.js"></script>
<script src="jquery.textillate.js"></script>

使い方

基本の書き方

HTMLのほうで

<h1 class="ef">My Title</h1>

基本の書き方は以下の通り、これでデフォルトのエフェクトが適用される。

$(function () {
    $('.ef').textillate();
})

もっと詳しくエフェクトを指定

エフェクトの指定はjs或いはhtmlのdata属性からできます。

jsで

$('.ef').textillate({ in: { effect: 'rollIn' } });

data属性で

<h1 class="ef" data-in-effect="rollIn">Tittle</h1>

詳細設定

$('.ef').textillate({

  // ループのオンオフ、falseの場合、outは発動しない
  loop: false,

  // テキストが置き換えられるまでの表示時間
  minDisplayTime: 2000,

  // 遅延時間
  initialDelay: 0,

  // アニメーションが自動的にスタートするかどうか
  autoStart: true,

  // フェードインのエフェクトの詳細設定
  in: {
    // エフェクトの名前（animate.cssをご参照下さい）
    effect: 'fadeInLeftBig',

    // 遅延時間の指数
    delayScale: 1.5,

    // 文字ごとの遅延時間
    delay: 50,

    // trueにすることでアニメーションをすべての文字に同時に適用される
    sync: false,

    // trueにすることで文字を順番にではなく、ランダムに入ってくるようにする
    // (注：syncがtrueの場合は無効になる)
    shuffle: false
  },

  // フェードアウトのエフェクトの詳細設定(同上)
  out: {
    effect: 'hinge',
    delayScale: 1.5,
    delay: 50,
    sync: false,
    shuffle: false,
  }
});

※エフェクトの名前やプレビューはAnimate.cssの公式ページから