CYOKODOG

JS DEVELOPER BLOG

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

  • 2014-09-29

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

Fade Page の使い方

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

BACKRAW
  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

Demo


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

BACKRAW
  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>


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

BACKRAW
  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>


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

BACKRAW
  1. $.fagePage.exec();

ダウンロード

こちらからどうぞ。


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

All Posts