画面遷移時にページ全体をフェードさせる方法

コーディング

アニメーション

ボタンを押して画面遷移をする時、フワッとフェードアウト→フェードインする動きが挟まっているとなんだか個性的で今っぽい感じがしますよね！
今回は簡単にページ遷移のアニメーションを実装できる方法をご紹介いたします！

簡単に実装するためのコード

後ほど詳しい解説もしますが、まずは実装するために必要な記述です！

HTML

<body class="fade">
	<div class="content">
		コンテンツが入ります
	</div>
</body>

CSS

/* bodyのafterにページ最前面の要素を作成 */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#fff;/* 色を変えたい場合はこちら */
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;/* 変化させる時間はこちら */
}
body.fadeout::after {
  opacity: 1;
}
.fade {
  -webkit-animation: fadein 2s ease 2s 1 forwards;
  animation: fadein 2s ease 2s 1 forwards;
}

@-webkit-keyframes fadein {
  100% {
    opacity: 0;
  }
}
@keyframes fadein {
  100% {
    opacity: 0;
  }
}

jQuery

//ローディング時の動き
$(window).on('load', function(){
setTimeout(function(){
	//bodyに付けているfadeのクラスを取る
	$('body').removeClass('fade');
  }, 400);
});
$(function() {
//ページ内リンク、target属性がない場合のaタグが押された時
$('a:not([href^="#"]):not([target])').on('click', function(e){
	e.preventDefault();
	link = $(this).attr('href');
	if (link !== '') {
		//bodyにフェードアウトさせるためのクラスを付与
		$('body').addClass('fadeout');
		setTimeout(function(){
			window.location = link;
		}, 400);
	}
return false;
});

jQueryに詳しい方はぱっと見てon.loadの動きだけあればkeyframesの動きは要らないと感じると思いますが、わざわざkeyframesを書いているのには意味があります。

記述内容の解説

HTML編

HTMLには特に難しい記述は必要なく、全コンテンツを囲むbodyに対してjqueryのon.loadで動きをつけるためのfadeのclassを付けます。

CSS編

まずは前半部分で最前面に表示できる要素を作成します。
最初はopacityを0に設定しておき、aタグが押された時にbodyにfadeoutのclassを付与してopacityを1に切り替えます。

/* bodyのafterにページ最前面の要素を作成 */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#fff;/* 色を変えたい場合はこちら */
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;/* 変化させる時間はこちら */
}
body.fadeout::after {
  opacity: 1;
}

FirefoxやChromeであればこちらだけで問題ないのですが、このままではsafariでブラウザバック（戻るボタン）を押した場合のように、on.loadがうまく効かなかった場合には真っ白な画面から変わらなくなってしまいます。
その場合に対応するために、次の記述を書いておくことをおすすめします！

body.fade {
  -webkit-animation: fadein 2s ease 2s 1 forwards;
  animation: fadein 2s ease 2s 1 forwards;
}
/* 先にIE用の記述 */
@-webkit-keyframes fadein {
  100% {
    opacity: 0;
  }
}
/* 通常のkeyframes */
@keyframes fadein {
  100% {
    opacity: 0;
  }
}

詳しく解説をすると、on.loadでfadeのclassが消せずに残ってしまっている場合にはkeyframesでopacityを0に変更しています。
また、keyframesの記述だけではIEで上手くいかないこともあるため、保険としてIE対策用の記述も書きました。

jQuery編

ブラウザ対策に関係する記述はCSSで完了しているため、jQueryに難しい記述は必要ありません。

前半部分ではページが読み込まれた時にHTMLのbodyに対して付けたfadeのclassを取る処理と、その処理を行う時間を設定します。

//ローディング時の動き
$(window).on('load', function(){
setTimeout(function(){
	//bodyに付けているfadeのクラスを取る
	$('body').removeClass('fade');
  }, 400);//どのくらいの時間で処理を行うか
});

後半部分ではaタグを押してページ遷移する時の処理についてを設定します。
全てのaタグがクリックされた場合に動かすこともできますが、ページ内リンクや別タブで開く場合にはアニメーションを挟まないことが多いと思いますので、href属性に「#」があった場合と、target属性があった場合のaタグは:notで除外します。

aタグがクリックされた後、bodyにCSSで指定をしたfadeoutのclassを付与し、ページをフェードアウトさせます。
ただclassを付与するだけではフェードアウトの動きをしている途中でページ遷移してしまうため、window.location = link;（ページ遷移）をフェードアウトの動きが終わった後に処理されるようにページ遷移させるまでの時間を指定します。

$(function() {
//ページ内リンク、target属性がない場合のaタグが押された時
$('a:not([href^="#"]):not([target])').on('click', function(e){
	e.preventDefault();
	link = $(this).attr('href');
	if (link !== '') {
		//bodyにフェードアウトさせるためのクラスを付与
		$('body').addClass('fadeout');
		setTimeout(function(){
			window.location = link;
		}, 400);//ページ遷移させるまでの時間を指定
	}
return false;
});