【33：textillate.js】テキストのアニメーション | JQueryプラグイン

f:id:seintoseiya:20150807223416p:plain
プロジェクトNo.33：textillate.js - DEMO

textillate.jsはテキストにアニメーションをかける事ができます。
実際のエフェクトの種類はanimate.cssの機能です。

ライブラリのダウンロード

以下の公式サイトからライブラリファイルをダウンロードします。
GitHub - jschr/textillate: A jquery plugin for CSS3 text animations.

今回ダウンロードしたのはtextillate-master.zipです。
この中から使うのは以下のファイル。

jquery.textillate.js
jquery.lettering.js
animate.css

以下のjqueryバージョンで動作が確認できました。

jquery1.6.4.min.js

基本的な使い方

HTML

まずはJSを呼び出し。

<script src="./js/jquery1.6.4.min.js"></script>
<script src="./js/jquery.textillate.js"></script>
<script src="./js/jquery.lettering.js"></script>

テキストアニメーションを適用する要素を記述します。

<h1 class="ef">textillate.js DEMO</h1>

JavaScript

textillate関数を呼び出す

次の文でデフォルトのエフェクトがかかります。

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

オプション

オプションの種類はGithubで紹介されています。
GitHub - jschr/textillate: A jquery plugin for CSS3 text animations.

エフェクトの種類に関してはanimation.cssの仕様をご確認ください。
Animate.css | A cross-browser library of CSS animations.

今回はHTMLでanimation.cssの種類を選択して、エフェクトさせるように作ってみました。

// セレクトボタン切り替えイベント
$('#effect-in, #effect-out').change(function(){
	var inVal = $('#effect-in').val();
	var outVal = $('#effect-out').val();
	effectIn(inVal, outVal);
});
// エフェクト処理
function effectIn(inVal, outVal){
    $('.ef').textillate({
        // 繰り返し、trueにしないと2回目以降が実行されない
        loop: true,
        // アニメーション開始までの時間
        minDisplayTime: 2000,
        // 遅延時間
        initialDelay: 0,
        // アニメーションが自動的にスタートするか
        autoStart: true,
        // フェードインのエフェクトの詳細設定
        in: {
            // エフェクトの種類（引数から取得）
            effect: inVal,
            // 遅延時間の指数
            delayScale: 1.5,
            // 文字ごとの遅延時間
            delay: 50,
            // trueにすることでアニメーションをすべての文字に同時に適用される
            sync: false,
            // trueにすることで文字表示がランダムな順に表示される
            // (注：syncがtrueの場合は無効になる)
            shuffle: false
        },
        out: {
            effect: outVal,
            delayScale: 1.5,
            delay: 50,
            sync: false,
            shuffle: false
        }
    });
}