文字を魅力的に動かせる!!テキストエフェクトの定番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
http://www.devirtuoso.com/2009/08/3d-flying-text-in-jquery/

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

Codename Rainbows

gridient
http://labs.dragoninteractive.com/rainbows_demo.php
※上記は既にサービスを終了しています。

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

Textualizer

texlizer
https://kiro.me/projects/textualizer.html
※上記は既にサービスを終了しています。

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

おわり

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

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

LIGの王です。ウェブの全てを学ぶ為、中国は四川省より日本にやってきました。王という名に恥じぬよう、ウェブ業界のKINGとなるべく日々頑張っております。よろしくお願いいたします。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL