ページをゆるふわっと表示する jQuery Chaining Effects Plugin (jquery.effectchain.js)

はいこんにちは！今回はこことかここみたいなサイトのページ表示エフェクトを簡単に実現するプラグインをつくってみたのでそのご紹介です！

Internet Explorer 6+, Safari 5, Google Chrome 8, Firefox 3.6, Opera 11 で動作確認済み。不具合や動作報告などありましたらコメント欄でご連絡ドーゾ。

---

動作デモ

画像ではお伝えしにくいので、映像で。最初の 20 秒までがプラグインのデモになります。

• 実際のデモサイトはこちら

---

特徴

簡単な記述でリッチなページ表示演出ができます。また、カスタムデータ属性を使って要素ごとにアニメーションを変えたりインターバル・ディレイを指定して表示のタイミングを制御することも可能です。（すごい！）

---

ダウンロード

• ダウンロード (サンプル付き, ZIP 4KB)
• ソースコード (github)

ソースコードは GPL v2 と MIT ライセンスのデュアルライセンスです。

---

使い方

一般的なプラグインと同様 jQuery と一緒にプラグインファイルを script タグで読み込みます。js ファイルで完結しているので追加の CSS などはロードする必要はありません。（あんしん！）

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.effectchain.js"></script>

jQuery は 1.4.3 以降を使ってください。こちらでは 1.4.3, 1.4.4, 1.5 で動作確認済みです。

一番シンプルな使い方

スクリプトをロードした状態で以下の記述を行うと、ページ内の div 要素がマークアップした順番でぱらぱらと表示されます。（かんたん！）

jQuery(function($) {
    $("body").effectChain({ target: "div" });
});

引数を指定して動作のカスタマイズ

引数を取ることもできます。（カスタマイザボー！）

jQuery(function($) {
    // アニメーション対象要素を包含する親となる要素を指定します
    // 親要素自身はアニメーション対象とはなりません
    $("#container").effectChain({
        // アニメーション対象の要素を指定します
        // jQuery Selector が使えます
        target: ".effectChain",
        // アニメーションが始まるまでの時間をミリ秒で指定します
        delay: 0,
        // アニメーション間隔をミリ秒で指定します
        interval: 50,
        // アニメーションの順序を指定します
        // true: DOM の逆順, false: DOM の正順
        reverse: false,
        // 各要素のアニメーション開始前の初期スタイルを指定します
        css: {
            opacity: 0
        },
        // animate 関数の引数を配列で指定します
        // 配列の要素がそれぞれ第一引数、第二引数に相当
        args: [{
            opacity: 1
        }, {
            duration: 500,
            easing: "swing"
        }]
    });
});

jQuery.animate() メソッドについてはこちらが詳しいです。

要素ごとのカスタマイズ

アニメーション対象の各要素にカスタムデータ属性を指定することで要素ごとのパラメータを指定することができます。カスタムデータ属性に対応するパラメータは以下のとおりです。（グレート！）

• data-fxchain
  • effectChain メソッドの引数にパラメータを上書きします
• data-fxchain-params
  • animate メソッドの第一引数のパラメータを上書きします
• data-fxchain-options
  • animate メソッドの第二引数のパラメータを上書きします

カスタムデータ属性はシングルクォーテーションで囲い、データは JSON フォーマットで記述します。以下のサンプルを参考にしてみてください。

<div id="#container">
    <div class="effectChain"
        data-fxchain='{ "css": { "fontSize": "10px" } }'
        data-fxchain-params='{ "fontSize": "18px" }'>
        フォントが 10px から 18px にかけて大きくなる
    </div>
    <div class="effectChain"
        data-fxchain='{ "interval": 0 }'>
        次の要素のアニメーションが始まるまでの間隔を 0 にする<br />
        ↓ と同時に登場
    </div>
    <div class="effectChain"
        data-fxchain='{ "interval": 0 }'>
        ↑ と ↓ と同時に登場
    </div>
    <div class="effectChain"
        data-fxchain='{ "interval": 0 }'>
        ↑ と同時に登場
    </div>
    <div class="effectChain"
        data-fxchain='{ "delay": 500 }'
        data-fxchain-options='{ "duration": 1000 }'>
        500 ミリ秒待ってからアニメーション開始
    </div>
</div>

具体的な実装はデモサイトのソースコードを参考にしてみてください！（なげやり）

---

というわけでいかがでしょうか？！ このプラグインを使ってふるふわ愛され上手を目指して頑張りましょう！！！（？）