jQueryプラグイン jquery.fadeMover ページ遷移をかっこよくする
今回は、jQueryプラグインの「 jquery.fadeMover」について書きます。
jquery.fadeMoverは、ページの遷移時にフェードアウト,フェードイン効果をだすためのjQueryプラグインです。
コレを使うと、ページ遷移をかっこよく演出できます！
具体的に言いますと、ページ遷移や読み込み時にフワッと表示する演出です。
ただし、速度が大事なサイト（ECとか）には、向いていません。
jquery.fadeMoverは、こちらの公式サイトからダウンロードできます↓
jquery.fadeMover - Fadein and Fadeout for jQuery
また、公式サイトにはjquery.fadeMoverを使っているようで、フワッと表示されます。
ここからは、jquery.fadeMoverの実装方法を書きます。
①
公式サイトから、jquery.fadeMoverをダウンロードし、保存する。
②
HTMLファイルの<head>内に下記のようにして読み込みます。
HTML
<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jquery.fademover.js"></script> </head>
<script>の部分に下記のように記述すれば、OKです。
jQuery
<script> $(function(){ $('body').fadeMover(); }); </script>
サンプルコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jquery.fademover</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jquery.fademover.js"></script> </head> <body> <h1>jquery.fademoverのテスト</h1> <p>てすと</p> <script> $(function(){ $('body').fadeMover(); }); </script> </body> </html>
実行結果
以上で、終わりです。
とても簡単に実装できます。
jquery.fadeMoverには、スピードの調整など様々なオプションがあります。
詳しくは、公式サイトを見てください。
ここでは、一部を書きます。
- 「nonmover」
nonmoverは、フェードアウト動作禁止にするものです。
主に、ページ内リンクの指定をしている<a>タグに使います。
こんな感じに使います。
<a href="http://www.yahoo.co.jp/" class="nonmover">やふー</a>
ページ遷移するときフェードアウト効果がなくなります。
- 「inDelay」
inDelayは、フェードイン遅延スピードを調節できます。ミリ秒で指定します。
複数要素がある場合、順番にフェードインしていきます。
HTML
<p class="yes">YES1</p> <p class="yes">YES2</p> <p class="yes">YES3</p> <p class="yes">YES4</p>
$('.yes').fadeMover({'inDelay': 500});
このようにすると、「YES」という文字が順番に表示されます。
