キタジマタカシ - 2012.05.22
- 更新しました。
ギャリーサイトで見つけた名古屋のデザイン会社さまのWebサイト。
デザインもクリーンで良い感じなのですが、特に良いと思ったのがページ変遷のときのアニメーション。リンクをクリックするとページがフェードアウトし、ローディング画像が表示、そしてリンク先のページがフェードインしてきます。これがとても気持ち良い。
ということで、このブログにも軽く実装してみたので、その方法をご紹介。
方法
jQueryのanimate関数を使って実装します（てことでjQuery本体も読み込んでくださいね）。下記のコードをhead内にコピペでいけるかと思います。
// まずbodyを非表示に
jQuery('head').append( '<style type="text/css">body{display:none;}</style>');
jQuery( function( $ ) {
// アニメーションのスピード
var timer = 200;
// ページロード完了後フェードイン
$('body').fadeIn( timer );
// リンクをクリックしたらフェードアウトしてから移動
// ただし、target="_blank"が指定してある場合はフェードアウトしない
$("a[target!='_blank']").click( function() {
var url = $(this).attr( 'href' );
$('body').animate({
'opacity' : 0
}, timer, function() {
location.href = url;
});
return false;
});
});
ローディング画像を表示させる処理はいれていませんので、入れたい方はカスタマイズしてみてください。
軽いページだとスムーズなアニメーションで気持ち良いのですが、このブログのように重いめのサイトだとページのローディングや他のJavaScriptの処理でもたついてアニメーションががくがくしたり、重くなったりしてしまいますね。
追記 2012.05.22
極力無駄な要素を追加しないでやりたいなと思って上記ではbody要素を消すようにしていたのですが、それだと不都合があったので改善版を。
HTML
<body> <div id="container"> 内容 <!-- end #container --></div> </body>
コンテンツを消すための要素が必要なので、bodyの直下に全体を囲むdiv#containerを設置します。この全体を囲む要素はできればCSSなど何も指定されていないのが良さそうなので、既にdiv#containerをHTMLに記述している人は適当にそれを何かで囲い、それを消す用に使用してください。
jQuery('head').append('<style type="text/css">#container{display:none;}</style>');
jQuery( function( $ ) {
var timer = 300;
$('body').append('<div id="js_fade"></div>');
$(window).ready(function() {
// ページロード時にフェードイン
$('#container').css({display: 'block'});
setTimeout( function() {
$('#js_fade').fadeOut(timer);
}, 500 );
});
$("a[target!='_blank']").click( function() {
var href = $(this).attr('href');
if ( href.match(/#/) || href.indexOf('javascript') == 0 ) return;
$('#js_fade').fadeIn( timer, function() {
location.href = href;
});
return false;
});
});
まず、div#containerを消し、bodyの最下部にdiv#js_fadeを生成。このdiv#js_fadeは真っ白で、全体に被せるように配置することになります。このdiv#js_fadeをfadeOut、fadeInさせることでページ自体がフェードしているように見せかけています。
#js_fade {
position : fixed;
top : 0;
left : 0;
width: 100%;
height : 100%;
background-color : #fff;
background-image : url( ../images/loading.gif );
background-repeat : no-repeat;
background-position : 50% 50%;
z-index: 1000;
}
ローディング画像として、../images/loading.gif を指定しています。適当な画像を用意してください。
まとめ
FireFox、Safari、Chromeではかなり綺麗に動作しますが、IEだとフリーズしたかのように重いです。これは手元のPC（WinXP + IE8）が重いせいなのか、このブログが重いせいなのか、それとも上記のコードが悪いのかはっきりと原因はわかりません…。本当はIE以外のブラウザでもっと良い感じで動作させるようにタイミングなど調整したかったのですが、IEで全く要素が消えてくれなかったり等バグが多かったので、IEでもかろうじて動く妥協点で落ち着かせました。IEマジ…
