読者です 読者をやめる 読者になる 読者になる

one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

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

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

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

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

以下の公式サイトからライブラリファイルをダウンロードします。
jschr/textillate · GitHub

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

以下の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で紹介されています。
jschr/textillate · GitHub

エフェクトの種類に関してはanimation.cssの仕様をご確認ください。
Animate.css

今回は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
        }
    });
}

全ソースはこちら

github.com

関連アプリ・書籍

jQuery入門道場

jQuery入門道場

jQuery レッスンブック jQuery2.X/1.X対応

jQuery レッスンブック jQuery2.X/1.X対応

jQuery 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)

jQuery 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)