2023.04.14

ブログ

画面遷移時にフワッとフェードアウト・フェードインさせる方法

画面遷移時にフワッとフェードアウト・フェードインさせる方法


今回は画面遷移時(ページ読み込み時)に、フワッと画面を真っ白にし、その後フワッと遷移後のページ全体をフェードインさせる方法をご紹介します。

HTML

  1. <body class="fade">

bodyタグにclass=”fade”を付与します。

CSS

  1. body::after {
  2.   content: '';
  3.   position: fixed;
  4.   top: 0;
  5.   left: 0;
  6.   width: 100%;
  7.   height: 100%;
  8.   background-color:#fff; /* 背景カラー */
  9.   z-index: 9999; /* 一番手前に */
  10.   pointer-events: none; /* 他の要素にアクセス可能にするためにポインターイベントは無効に */
  11.   opacity: 0; /* 初期値では非表示 */
  12.   -webkit-transition: opacity .8s ease; /* アニメーション時間は 0.8秒 */
  13.   transition: opacity .8s ease;
  14. }
  15. /*body要素に.fadeoutセレクタがある場合には、レイヤーが表示されるようにopacityを1に設定します。*/
  16. body.fade::after {
  17.   opacity: 1;
  18. }

body要素に::after擬似クラスを使用します。
これは、body要素の最上層レイヤーに表示されます。これにより、他の要素が重なっている場合でも、常に背景が表示されるようになります。
背景色は白に設定し、全画面に表示されるようにサイズを設定しています。
この時、初期値ではopacityを0にしておきます。これにより、最初は表示されず、fadeoutクラスが付与された場合にだけ表示されるようにします。

JavaScript

  1. ページ表示した瞬間は非表示にするため、body要素から.fadeoutクラスを取り除く
  2. $(window).on('load', function(){
  3.   $('body').removeClass('fade');
  4. });
  5. $(function() {
  6.   // ハッシュリンク(#)と別ウィンドウでページを開く場合はスルー
  7.   $('a:not([href^="#"]):not([target])').on('click', function(e){
  8.     e.preventDefault(); // ナビゲートをキャンセル
  9.     url = $(this).attr('href'); // 遷移先のURLを取得
  10.     if (url !== '') {
  11.       $('body').addClass('fade'); // bodyに class="fadeout"を挿入
  12.       setTimeout(function(){
  13.         window.location = url; // 0.8秒後に取得したURLに遷移
  14.       }, 800);
  15.     }
  16.     return false;
  17.   });
  18. });

※jQueryは読み込んでおきましょう。

以上が、画面遷移時にフワッとフェードアウト・フェードインさせる方法になります。
最後までご覧いただきありがとうございます。

無料相談・お問い合わせ

まずはお気軽にご相談ください。
DESIGN STUDIO MAEDAでは無料相談を実施しています。