2022.07.20
【簡単】プロのようなデザインが作れるツールCanva(キャンバ)のおす...
デザイン
ボタンを押して画面遷移をする時、フワッとフェードアウト→フェードインする動きが挟まっているとなんだか個性的で今っぽい感じがしますよね!
今回は簡単にページ遷移のアニメーションを実装できる方法をご紹介いたします!
目次
後ほど詳しい解説もしますが、まずは実装するために必要な記述です!
<body class="fade">
<div class="content">
コンテンツが入ります
</div>
</body>
/* 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;
}
}
//ローディング時の動き
$(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には特に難しい記述は必要なく、全コンテンツを囲むbodyに対してjqueryのon.load
で動きをつけるためのfade
のclassを付けます。
まずは前半部分で最前面に表示できる要素を作成します。
最初は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対策用の記述も書きました。
ブラウザ対策に関係する記述は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;
});
ページ最前面に要素を表示させるため、しっかりと全ブラウザに対応しておくことが大切です!
今回は単色ですが、複数色や画像を設置することで個性的なページ遷移のアニメーションを作成することができます!
ぜひ応用して色々なページ遷移アニメーションに活用してみてください!
アニメーションの参考になる本はこちら