フェード効果で「ふわっ」とページ切替を行う jQuery プラグイン

Fage Page はフェード効果を使ってふわっとページ切替を行えるようにする jQuery プラグインです。各ページに CSS と JS ファイルを読み込むのみで適用されます。
jQuery Sitekit の一機能として、もしくは単独の jQuery プラグインとして使用することができます。

Fade Page の使い方

フェード切替効果をだしたいページで、jQuery、Fade Page(または jQuery Sitekit)の JS、CSS ファイルを読み込みます。

  1. <link href="jquery.fade-page.css" rel="stylesheet" type="text/css">
  2. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  3. <script src="jquery.fade-page.js"></script>

以上です。

fade-page


fade-page.js を読み込む前にパラメータを記述することで設定を変更できます。例えばフェードスピードを 3 秒(デフォルトは 1 秒)にする場合は、以下のように記述します。

  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  2. <script>
  3. $.fadePage = {
  4. fadeInSpeed : 3000
  5. };
  6. </script>
  7. <script src="jquery.fade-page.js"></script>


フェード効果の自動適用を抑止したい場合は以下のように記述します。

  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  2. <script>
  3. $.fadePage = {
  4. autoRun : false
  5. };
  6. </script>
  7. <script src="jquery.fade-page.js"></script>


任意のタイミングでフェードインさせたい場合は以下のよう記述します。

  1. $.fagePage.exec();

ダウンロード

こちらからどうぞ。


実装方法については以下をご覧ください。