JavaScript (jQuery)でリンク毎に、画面遷移アニメーションを追加する方法【図解】

2021年11月18日2021年11月28日

こんにちは、説也です。

この記事では、jQueryによる画面遷移アニメーションのやり方を図解で紹介しています。

今回ご紹介する、画面遷移アニメーションは

リンクを押した後にアニメーションが実行され、そのあとにジャンプが行われる仕様となります。

リンク毎に、アニメーションを変えたいといった場合に有効と思われます。

CSSを基本からしっかり学びたい場合は「 CSS設計完全ガイド 」がオススメです。

詳細解説だけでなく、実践的モジュールが数多く詰まっており、CSS設計の考え方と実践法が身につきます。

実装コード 相関図

実行結果

See the Pen 画面遷移時にローディングエフェクトを実装 by 説也 (@setsunaru_com) on CodePen.

実装イメージ

コード解説

HTML

<div class="CurtainObject"></div>

<a class="Curtainlink" href="https://anke-to.net/">
  リンク
</a>

CSS

/* bodyにScreenCurtainクラスが追加したら */
body.ScreenCurtain .CurtainObject{
  /* 画面を覆うカーテンオブジェクトを生成 */
  display: block;  /* 横幅いっぱいのブロック */
  position:fixed;  /* スクロールしても固定 */
  z-index: 999;    /* 最前面に表示 */
  width: 100vw;    /* 横幅は画面最大 */
  height: 100vh;   /* 縦幅は画面最大 */
  top: 0;          /* 表示開始位置縦 */
  left: 0;         /* 表示開始位置横 */
  background-color: #f9ca9e; /* オブジェクトの色 */
  
  /* カーテンアニメーション設定 */
  animation-name:CurtainAnime; /* アニメーション名 */
  animation-duration:0.5s;  /* アニメ時間 */
  animation-timing-function:ease-in-out; /* 遅い>早い>遅い */
  animation-fill-mode:forwards; /* 最後状態を最後まで保持 */
}

@keyframes CurtainAnime{
  0% {
    /* 左端を原点に */
    transform-origin:left;
    /* 最小スケールに縮めておく */
    transform:scaleX(0);
  }
  100% {
    /* 左端を原点に */
    transform-origin:left;
    /* 最大スケールにもどす */
    transform:scaleX(1);
  }
}

JavaScript + jQuery

//クリック時にカーテンを表示
$(".Curtainlink").on('click',function(event){
  event.preventDefault();               // リンク解除
  let hrefurl = $(this).attr('href');   // URL取得
  
  $('body').addClass('ScreenCurtain');
  setTimeout(function(){
    window.location = hrefurl;  // 0.5秒待機(アニメ時間)
  }, 500);
  
 });

//画面ロード時に画面のカーテンを解除
$(function() {
  $('body').removeClass('ScreenCurtain');
});

// ブラウザバックで戻ったとき画面のカーテンを解除
window.onpageshow = function(event) {
  // キャッシュから画面をロードした場合
  if (event.persisted) {
    $('body').removeClass('ScreenCurtain');
  }
};

ここまで見ていただき、ありがとうございます。🙂

少しでもあなたのWEB制作のお役にたてれば幸いです。 🤲

ではまた！