サイト訪問時や、リンク先ページに移動する際にフェードイン・フェードアウト効果でかっこよく演出してくれるjQueryプラグインのご紹介です。
高級感のあるサイトや、ふわっとしたイメージのサイトの印象をワンランクアップしてくれるでしょう!
まずは下記からプラグインをダウンロード
jQuery本体とfadeMover.jsをhead内で読み込みます。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="jquery.fademover.js"></script>
続けてhead内に下記の実行コードを記入します
<script> $(function(){ $('body').fadeMover(); }); </script>
以上で完了です。超簡単ですね!
さらにはフェード動作の切り替えや、スピードの調整などのオプションもついているので、好みに合った雰囲気に調整も可能となっています。
<script> $(document).ready(function() { $("body").fadeMover({ 'effectType': 1, //1:フェードイン&&フェードアウト 2:フェードインのみ 3:フェードアウトのみ 'inSpeed': 800, //フェードインのスピードをミリ秒で指定します。 'outSpeed': 800, //フェードアウトのスピードをミリ秒で指定します。 'inDelay' : '0', //フェードイン遅延スピードをミリ秒で指定します。 //複数要素がある場合順番にフェードインしていきます。「0」を指定すると遅延なくフェードインします。 'outDelay' : '0', //フェードアウト遅延スピードをミリ秒で指定します。 //複数要素がある場合順番にフェードアウトしていきます。「0」を指定すると遅延なくフェードアウトします。 'nofadeOut' : 'nonmover' //<a href="#top">など、ページ内リンクの指定をしている<a>タグはフェードアウト動作禁止にしています。 //それ以外の<a>タグでフェードアウト動作させたくない場合のclass名を指定します。 //<a href="○○○.html" class="nonmover">とclass指定した<a>タグはフェードアウト動作禁止になります。 }); }); </script>
ECなど、スピードが大事なサイトにはあまり向いていないかもしれませんが、他のサイトと一味違ったリッチな表現が出来るので、演出の一つとして引き出しに入れておいてもいいでしょう。
The following two tabs change content below.

やす
夏は薪を拾ったり割ったりし、冬はそれを燃やして暖をとる生活に憧れて、北海道にやってきました。
好きな生き物は酵母菌、中でもサッカロミセス・セレビシエが好みです。

最新記事 by やす (全て見る)
- CSS3アニメーションを使って魅せるボタンを実装しよう!! - 2014年2月28日
- ページ移動をかっこよく演出するjQueryプラグイン「fadeMover」のご紹介 - 2014年1月30日
- Data URI Schemeで画像を埋め込み、サイトを高速化しよう! - 2013年12月27日
- スマホの実機検証で悩むあなたへ!クラウド型端末検証サービス「Remote TestKit」が便利だよ - 2013年11月19日
- カイエ・蕎麦ージュ - 2013年6月5日
株式会社エレメントのサイトが新しくなりました!
スタッフが更新する最新情報・ブログはこちらからご確認いただけます。