2023.04.14
ブログ
画面遷移時にフワッとフェードアウト・フェードインさせる方法
今回は画面遷移時(ページ読み込み時)に、フワッと画面を真っ白にし、その後フワッと遷移後のページ全体をフェードインさせる方法をご紹介します。
HTML
- <body class="fade">
bodyタグにclass=”fade”を付与します。
CSS
- body::after {
- content: '';
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color:#fff; /* 背景カラー */
- z-index: 9999; /* 一番手前に */
- pointer-events: none; /* 他の要素にアクセス可能にするためにポインターイベントは無効に */
- opacity: 0; /* 初期値では非表示 */
- -webkit-transition: opacity .8s ease; /* アニメーション時間は 0.8秒 */
- transition: opacity .8s ease;
- }
- /*body要素に.fadeoutセレクタがある場合には、レイヤーが表示されるようにopacityを1に設定します。*/
- body.fade::after {
- opacity: 1;
- }
body要素に::after擬似クラスを使用します。
これは、body要素の最上層レイヤーに表示されます。これにより、他の要素が重なっている場合でも、常に背景が表示されるようになります。
背景色は白に設定し、全画面に表示されるようにサイズを設定しています。
この時、初期値ではopacityを0にしておきます。これにより、最初は表示されず、fadeoutクラスが付与された場合にだけ表示されるようにします。
JavaScript
- ページ表示した瞬間は非表示にするため、body要素から.fadeoutクラスを取り除く
- $(window).on('load', function(){
- $('body').removeClass('fade');
- });
- $(function() {
- // ハッシュリンク(#)と別ウィンドウでページを開く場合はスルー
- $('a:not([href^="#"]):not([target])').on('click', function(e){
- e.preventDefault(); // ナビゲートをキャンセル
- url = $(this).attr('href'); // 遷移先のURLを取得
- if (url !== '') {
- $('body').addClass('fade'); // bodyに class="fadeout"を挿入
- setTimeout(function(){
- window.location = url; // 0.8秒後に取得したURLに遷移
- }, 800);
- }
- return false;
- });
- });
※jQueryは読み込んでおきましょう。
以上が、画面遷移時にフワッとフェードアウト・フェードインさせる方法になります。
最後までご覧いただきありがとうございます。