ページ移動をかっこよく演出するjQueryプラグイン「fadeMover」のご紹介


サイト訪問時や、リンク先ページに移動する際にフェードイン・フェードアウト効果でかっこよく演出してくれるjQueryプラグインのご紹介です。

高級感のあるサイトや、ふわっとしたイメージのサイトの印象をワンランクアップしてくれるでしょう!

まずは下記からプラグインをダウンロード

jquery.fadeMover

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.
やす

やす

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

コメントは受け付けていません。