画面遷移

2023.06.09

背景色が伸びる（上から下、下から上、右から左、左から右）

jQueryでローディング画面をフェードアウトし、bodyタグにクラスを付与。
クラスが付与されたらCSSで画面遷移の動きを表示した後、時間を遅らせてメインコンテンツを出現させる。

以下の例は、背景色が上から下に伸びる動きを示したものである。

See the Pen 画面遷移01 by Toru Katsumata (@Toru-Katsumata) on CodePen. 

/* 背景色が下から上に伸びる場合 */
@keyframes PageAnime{
  0%{
    transform-origin: bottom;
    transform: scaleY(0);
  }
  50%{
    transform-origin: bottom;
    transform: scaleY(1);
  }
  50.001%{
    transform-origin: top;
  }
  100%{
    transform-origin: top;
    transform: scaleY(0);
  }
}

/* 背景色が右から左に伸びる場合 */
@keyframes PageAnime{
  0%{
    transform-origin: right;
    transform: scaleX(0);
  }
  50%{
    transform-origin: right;
    transform: scaleX(1);
  }
  50.001%{
    transform-origin: left;
  }
  100%{
    transform-origin: left;
    transform: scaleX(0);
  }
}

/* 背景色が左から右に伸びる場合 */
@keyframes PageAnime{
  0%{
    transform-origin: left;
    transform: scaleX(0);
  }
  50%{
    transform-origin: left;
    transform: scaleX(1);
  }
  50.001%{
    transform-origin: right;
  }
  100%{
    transform-origin: right;
    transform: scaleX(0);
  }
}

背景色が伸びる（中央から外、中央から上下）

jQueryでローディング画面をフェードアウトし、bodyタグにクラスを付与。
クラスが付与されたらCSSで画面遷移の動きを表示した後、時間を遅らせてメインコンテンツを出現させる。

以下の例は、背景色が中央から外に伸びる動きを示したものである。

See the Pen 画面遷移02 by Toru Katsumata (@Toru-Katsumata) on CodePen. 

/* 背景色が中央から上下に伸びる場合 */
/* 上に消えるエリア */
body.appear .splashbg1{
  animation-name: PageAnime;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  position: fixed;
  z-index: 99;
  width: 100%;
  height: 100vh;
  left: 0;
  bottom: 50%;
  transform: scaleX(1);
  /* 伸びる背景色の設定 */
  background-color: #333;
}

@keyframes PageAnime{
  0%{
    transform-origin: top;
    transform: scaleY(1);
  }
  100%{
    transform-origin: top;
    transform: scaleY(0);
  }
}

/* 下に消えるエリア */
body.appear .splashbg2{
  animation-name: PageAnime2;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  position: fixed;
  z-index: 99;
  width: 100%;
  height: 100vh;
  top: 50%;
  left: 0;
  transform: scaleX(1);
  /* 伸びる背景色の設定 */
  background-color: #333;
}

@keyframes PageAnime2{
  0%{
    transform-origin: bottom;
    transform: scaleY(1);
  }
  100%{
    transform-origin: bottom;
    transform: scaleY(0);
  }
}

背景色が伸びる（斜め）

jQueryでローディング画面をフェードアウトし、bodyタグにクラスを付与。
クラスが付与されたらCSSで画面遷移の動きを表示した後、時間を遅らせてメインコンテンツを出現させる。

See the Pen 画面遷移03 by Toru Katsumata (@Toru-Katsumata) on CodePen.

背景色が円形に縮小する（中央へ）

jQueryでローディング画面をフェードアウトし、bodyタグにクラスを付与。
クラスが付与されたらCSSで画面遷移の動きを表示した後、時間を遅らせてメインコンテンツを出現させる。

See the Pen 画面遷移04 by Toru Katsumata (@Toru-Katsumata) on CodePen.

背景色が四角に拡大する（四隅へ）

jQueryを使い、ローディング画面をフェードアウトしたらbodyタグにクラスを付与。
また、画面遷移用の<div>にブラウザの高さ分のborderを指定し、CSSアニメーションの定義名を追加。
CSSのアニメーションで、borderの太さを変化させ、時間を遅らせてメインコンテンツを出現させる。

See the Pen 画面遷移05 by Toru Katsumata (@Toru-Katsumata) on CodePen.

inserted by FC2 system