CSS JavaScript

2021.07.20

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

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

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

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

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;
});

まとめ

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

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

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

0

関連記事

  • 2021.07.14

    CSSだけで固定背景(パララックスデザイン)を実装する方法【iOS対応方法も紹介】

    CSS

  • 2021.07.13

    (簡単)inputをクリックしたときの枠線の色を変える

    CSS

  • 2021.07.07

    最初に覚えておきたい!CSS Flexboxの基礎

    CSS

おすすめ記事

  • 2021.06.08

    CSSだけでできる!マーカーで線が引かれているようなデザインの作り方

    CSS

    WordPress

  • 2021.06.30

    【おすすめ書籍】Sassを始めてみるならこの1冊

    CSS

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!