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

web制作

2014/01/30

このエントリーをはてなブックマークに追加

サイト訪問時や、リンク先ページに移動する際にフェードイン・フェードアウト効果でかっこよく演出してくれる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.
やす

やす

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

株式会社エレメントのサイトが新しくなりました！
スタッフが更新する最新情報・ブログはこちらからご確認いただけます。

エレメント ブログ一覧を見る

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