プロのクリエイターがホームページの作成や運用ノウハウについて無料公開!

ホームページTIPS
facebook twitter mail

このサイトでは、ホームページ制作運用に関する各種の情報を無料公開しています。
内容についてのご意見・ご指摘については、フォームからお知らせいただけば、適宜変更させていただきます。

javascriptに関するTips

2018.5.19更新

ページ遷移の際にフェードアウト・インするアニメーションを実装する

Attention!

ページを遷移するときに、フェードアウト・インのアニメーションをかける方法はいくつかあり、Githubに公開されているjQueryライブラリや、WordPressのプラグインなどもありますが、ここではプラグインなどを使わず、軽量なjavascriptコードで実装する方法をご紹介します。

1最初にフェードアウト・インのエフェクトの仕組みを説明します。

							
							

 

まずは、demoサンプルがどのように動いているのか?その仕組みについて説明します。

body要素に::after疑似セレクタを作り、CSSでページ全体を「白」で覆う一番上層のレイヤーに指定します。

ページが表示されたときはこのレイヤーの透明度を「100%」から「0%」にアニメーションさせ(フェードイン)

アンカー(a)タグをクリックしてページ遷移するときには、

レイヤーの透明度を再び「0%」から「100%」にアニメーション(フェードアウト)させて、その直後に遷移させる、

という動作を設定していきます。

2HTMLの構造
<!-- .fadeoutがあるときにアニメーションを実行します -->

<body class="fadeout">
  <section class="page one">
    <article>
      <h1>Page One</h1>
      <a href="two.html" class="navigate-anchor">Move to Next Page</a>
    </article>
  </section>
</body>

 

bodyタグにclass=”fadeout”を付与しておきます。

3CSSのスタイリングはこのようにします。
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秒 */
 -ms- transition: opacity .8s ease;
 -moz- transition: opacity .8s ease;
  transition: opacity .8s ease;
}


/*body要素に.fadeoutセレクタがある場合には、レイヤーが表示されるようにopacityを1に設定します。*/

body.fadeout::after {
  opacity: 1;
}


/*お好みで、.fadeoutセレクタ以下の他の要素にもアニメーション用のCSSを定義します*/
/*DEMOではページ遷移時にarticle要素のスケールもアニメーションさせています*/

body.fadeout article{
  -webkit-transform:scale(1.2);
  transform:scale(1.2);
}

 

bodyの::after擬似クラスを、最上層レイヤーにして、背景は白、サイズは全画面表示にしています。

初期値では、opacity は0(この上層レイヤーは非表示 = ページコンテンツが表示される)として、

.fadeoutクラスが付与された場合は、opacityは1(上層レイヤーは100%表示 = ページコンテンツが消える)

と設定します。

4あとは以下のように javascriptを書けば完了です。(jQueryは読み込んでおきましょう)
/*設定1*/

$(window).on('load', function(){
  $('body').removeClass('fadeout');
});


/*設定2*/

$(function() {
  // ハッシュリンク(#)と別ウィンドウでページを開く場合はスルー
  $('a:not([href^="#"]):not([target])').on('click', function(e){
    e.preventDefault(); // ナビゲートをキャンセル
    url = $(this).attr('href'); // 遷移先のURLを取得
    if (url !== '') {
      $('body').addClass('fadeout');  // bodyに class="fadeout"を挿入
      setTimeout(function(){
        window.location = url;  // 0.8秒後に取得したURLに遷移
      }, 800);
    }
    return false;
  });
});

 

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

 

< javascriptの説明 >

/*設定1*/

ページ表示した瞬間には、非表示にしたいので、body要素から.fadeoutクラスを取り除きます。

 

/*設定2*/

そして、ページ内のアンカータグがクリックされたら、それを検知してページナビゲート動作を一旦キャンセルし、

body要素に再び.fadeoutセレクタを追加してページ全体をフェードアウトさせてから(アニメーションの時間経過後)、

クリックされたアンカータグのhref属性に指定されたURLに遷移します。

以上で設定完了です。

 

<ポイント>

アンカータグのクリック検出は、a:not([href^="#"]):not([target]) として

ハッシュリンク(#)とtarget=”_blank”などとして新しいウィンドウでURLを参照する場合は除外することと、

setTimeoutで待機する時間は、CSSのtransitionで指定したアニメーション時間と同じにしておくことです。

トップへ