ページ遷移時にフェード効果を入れる事で他とは違った雰囲気を持ったサイトにしてくれるjQueryのプラグイン「jquery.fadeMover」と「animsition」。

AJAXで画面作っているサイトやスピード重視のサイトは別としても、上品なデザインや柔らかいイメージサイトの場合には重宝しそうです。
プラグイン化されているので、制作側も簡単に実装できるし、何よりもこういった効果はユーザーやクライアントにも分かりやすくて良いです。

jquery.fadeMover

jquery.fadeMover

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.fademover.js"></script>

<script>
$(document).ready(function() {
$("body").fadeMover({
//1:フェードイン&&フェードアウト　2:フェードインのみ　3:フェードアウトのみ
'effectType': 1,
//フェードインのスピードをミリ秒で指定します。
'inSpeed': 800,
//フェードアウトのスピードをミリ秒で指定します。
'outSpeed': 800,
//フェードイン遅延スピードをミリ秒で指定します。
//複数要素がある場合順番にフェードインしていきます。「0」を指定すると遅延なくフェードインします。
'inDelay' : '0',
//フェードアウト遅延スピードをミリ秒で指定します。
//複数要素がある場合順番にフェードアウトしていきます。「0」を指定すると遅延なくフェードアウトします。
'outDelay' : '0',
//<a href="#top">など、ページ内リンクの指定をしている<a>タグはフェードアウト動作禁止にしています。
//それ以外の<a>タグでフェードアウト動作させたくない場合のclass名を指定します。
//<a href="○○○.html" class="nonmover">とclass指定した<a>タグはフェードアウト動作禁止になります。
//これはajax等でコンテンツを書き換える場合、利用するかも？と思ってつけている機能です。
'nofadeOut' : 'nonmover'
});
});	
</script>

animsition

こちらは動きがfadeの他にスライド系のオプションが4種類ほどあり、jqueryのeasing.jsを利用していてオプションが多め。

名前がclickstreamからanimsitionに変わったようで、アニメーションもeasing.jsではなくCSS3を使う仕様に変更されていて18種類のアニメーションクラスも用意されています。サンプルサイトを見ると様々な動きでページ遷移しています。

animsition Github　 example

Fade

• fade-in
• fade-out
• fade-in-up
• fade-out-up
• fade-in-down
• fade-out-down
• fade-in-left
• fade-out-left
• fade-in-right
• fade-out-right

Rotate

• rotate-in
• rotate-out

Flip

• flip-in-x
• flip-out-x
• flip-in-y
• flip-out-y

Zoom

• zoom-in
• zoom-out

<!-- animsition css -->
<link rel="stylesheet" href="dist/css/animsition.min.css">
<!-- vendor js -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- animsition js -->
<script src="dist/js/animsition.min.js"></script>
<script>
$(document).ready(function() {
$(".animsition").animsition({
inClass: "animsition-in-duration",
outClass: "animsition-out-duration",
linkElement: ".animsition-link"
});
}); 
</script>
<div 
class="animsition animsition-in-duration" 
data-animsition-in="fade-in" 
data-animsition-out="fade-out-down"
>
<a href="./page1" class="animsition-link" data-animsition-out="flip-out-y">
animsition link 1
</a>
<a href="./page2" class="animsition-link" data-animsition-out="rotate-out">
animsition link 2
</a>
</div>