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


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

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

ハリウッドの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の公式ページから

注意点

アニメーションはCSS3をベースにしているため、モダンブラウザでしか確認できないので、ご注意を。

textillate.js以外のプラグイン色々

個人的には一番しっくりきたのがtextillate.jsだったのですが、他にも色々ありますので、ご参考まで。

Shuffle Letters Effect

映画「マトリックス」のテキストエフェクトと似ている。

shuffle

Demoページ
ダウンロードページ

Sliding Letters

マウスオーバー時に文字にスライドエフェクトがかかる。

sliding

Demoページ

3D Flying Text

テキストがどんどん画面に向かって飛んでくるエフェクト。

3d

ダウロードページ

※2014年9月9日 Demoページのリンクを削除しました。

Codename Rainbows

テキストにグラデーションをかけられる

gridient

Demoページ

Textualizer

textillate.jsと似通っているが、IEもサポートしています。その代わりにエフェクトの種類は少ない。

texlizer
Demoページ

おわり

いかがでしたか?少しは興味を持って頂けたのでしょうか。
一味違うサイト作りにはおあつらえ向きのプラグインばかりだったと思いますが、ご参考になったら嬉しいです。

王
この記事を書いた人

バックエンドエンジニア

関連記事