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

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

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

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

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タグが押された時にbodyfadeoutの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.loadfadeのclassが消せずに残ってしまっている場合にはkeyframesopacityを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;
});

まとめ

ページ最前面に要素を表示させるため、しっかりと全ブラウザに対応しておくことが大切です!
今回は単色ですが、複数色や画像を設置することで個性的なページ遷移のアニメーションを作成することができます!

ぜひ応用して色々なページ遷移アニメーションに活用してみてください!

アニメーションの参考になる本はこちら

この記事をシェアする

関連記事

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    コーディング

  • 2023.12.29

    記事タイトルを行数で制御するCSS

    CSS

    コーディング

  • 2023.12.29

    CSSのホバーを工夫するようになった話

    コーディング

    制作

おすすめ記事

  • 好きなフォントは?現役WEBデザイナーに聞いてみた!

    2022.06.01

    デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

    デザイン

    制作

  • 2022.05.31

    超簡単!GoogleMapの色をサイトにあわせて変える方法

    コーディング

    制作

  • 2022.04.12

    Chromeで画像やテキストがぼやけるときの対処法

    コーディング

    制作

×