2010 23 6月

ページ遷移時にフェードイン・フェードアウト

Re:designのサイトで設置した、jQueryを使用してページ遷移時にフェードイン・フェードアウトさせる方法

//インラインCSSで#wrapper{display;block;}を追加
$(‘head’).append(‘<style type=”text/css”>#wrapper{display;none;}</style>’);
$(function(){
//読み込み時にフェードイン
$(‘#wrapper’).fadeIn(1000);
//aタグクリック時にフェードアウト実行
$(‘#navi a, a.windowFade’).click(function(){
var url = $(this).attr(“href”);
$(‘#wrapper’).animate({“opacity”:0},1000,function(){
location.href = url;
});
return false;
});
});

<div id=”wrapper”>等で全体を囲んで、そのdivをインラインCSSでdisplay:none;にする。
外部のCSSでdisplay:none;を記載するとjavascriptオフの時に見えなくなるからjsでインラインCSSを追加する。

aタグをクリック時にフェードアウトさせてページ遷移を実行させるんだけど、$(‘a’).click…とかにすると全部のaタグに反映されて_blankのリンクとかまでフェードアウトしてしまうのでナビゲーションやwindowFadeのクラスを付けたaタグのみ実行させる。

ただこの書き方だとlavalampとかのプラグインを使用しているとおかしくなるので別の方法が必要。
Re:designはこっち。

$(‘head’).append(‘<style type=”text/css”>#wrapper{visibility:hidden;}</style>’);
$(function(){
//bodyに<div id=”fade”></div>追加
$(‘#wrapper’).after(‘<div id=”fade”></div>’);
//ie6 position:fixed
if(jQuery.browser.msie && jQuery.browser.version < 7){
$(window).scroll(function(){
var top = $(this).scrollTop();
$(‘#fade’).css(‘top’,top);
});
}
//wrapperをvisibility:visibleに
$(‘#wrapper’).css(‘visibility’,'visible’);
//読み込み時にアウト
$(‘#fade’).fadeOut(1000);
//aタグクリック時にフェードイン実行
$(‘#navi a, a.windowFade’).click(function(){
var url = $(this).attr(“href”);
$(‘#fade’).fadeIn(1000,function(){
location.href = url;
});
return false;
});
});
#fade {
position:absolute; /* ie6 */
position:fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
}

イメージとしては画面の1番上に<div id=”fade”></div>をのせて、それを画面遷移時にフェードイン・アウトさせる感じ。

内容としては、
1. <div id=”wrapper”>にvisibility:hidden;を追加。
2. <div id=”fade”></div>を<div id=”wrapper”>の後に追加。
3. <div id=”wrapper”>をvisibility:visible;に。
4. <div id=”fade”></div>をフェードアウト。
5. aタグクリック時に<div id=”fade”></div>をフェードインさせる。

こんな感じでページ遷移時のフェードイン・フェードアウトを実装できると思います。

TAGS :

COMMENTS(4)

  1. 2011.04.08 - 12:46 AM

    [jQuery]で擬似的にローディング画面を実装してみた | ALOG | THE AGE

    [...] ※参考:ページ遷移時にフェードイン・フェードアウト [...]

  2. 2013.01.23 - 12:41 PM

    AK

    はじめまして、ページ遷移時にフェードインさせる
    方法を調べていてたどり着きました。
    Re:design様のサイトの完成度にはほれぼれしました。

    現在御社で使用されているフェードインさせる方法は
    上記方法をそのままお使いなのでしょうか?
    それとも進化系といいますか、違う手法で行われているのでしょうか?

    ご教示頂ければ幸いです、宜しくお願い致します。

  3. 2013.01.23 - 12:52 PM

    kojilow

    AK様
    kojilog Blogをみて頂きありがとうございます。
    この記事ではページ遷移時にフェードインさせる方法を2つ紹介していますが、Re:designのサイトは2つめの方法を採用しております。

  4. 2013.01.23 - 12:59 PM

    AK

    kojilow様
    早々のご返信ありがとうございます。
    参考にさせて頂きます、ありがとうございました。

POST A COMMENT