【ワードプレス】オープニングローダーに背景色を左右に開く画面遷移を追加

2022年5月14日

前の記事でオープニングローダーを作成しました。本記事では、オープニングローダーの後、背景色で塗りつぶされていた画面を左右に開く画面遷移を追加してみます。

元々のオープニングローダーのデモサイトはこちら（動きのフローは下記の通り。緑色がローダーです。）

今回作成するデモサイトはこちら。フローとしては下記赤字部が追加されます。

この記事ではすでに設定したオープニングローダーに画面遷移を追加します。オープニングローダーの設定方法については次の記事を参照ください。

ブロックの構成

もともとのローダー部（背景色とテキスト）と表示コンテンツは以下のようなブロック構成です。

これに左右に開閉する背景色を表示するために、カスタムHTMLブロックでdivタグを２つ以下のように挿入します。

コピペ用です。カスタムHTMLブロックにペーストしてください。

<div id="splashbg1"></div>
<div id="splashbg2"></div>

この２つのdivタグが、それぞれ左右に開く背景色となります。

カスタムCSSの追記

次のCSSを追加記述します。

/* 左右OPEN遷移用　*/
#splashbg1,
#splashbg2 {
  content: "";
  position: fixed;
  z-index: 99;
  width: 50%;
  height: 100%;
  background-color: #000;
}
#splashbg1 {
  top: 0;
  right: 50%;
  transform-origin: left;
  transform: scaleX(1);
}
#splashbg2 {
  top: 0;
  left: 50%;
  transform-origin: right;
  transform: scaleX(1);
}

divタグにローダーと同じ背景色をつけて、position: fixed でローダーの下層レイヤーに配置します。
（#splashbg1が左へ、#splashbg2が右へ開く背景色となる）

ローダー部の下層レイヤーとするために、6行目のz-indexの値はローダー部のz-index値999より小さい値としておきます。

JSファイルへの追記

すでに子テーマフォルダ内に設置してあるローダー用JSファイルloader.jsに、次の12～13行目を追記します。

window.addEventListener("load", function () {
  gsap.to("#loading_logo", { delay: 0.2, duration: 1, opacity: 1 });
  gsap.to("#loading_logo", { delay: 1.5, duration: 1, opacity: 0 });
  gsap.to("#loading", {
    delay: 3,
    duration: 1,
    opacity: 0,
    onComplete: Unshow,
  });
  function Unshow() {
    document.querySelector("#loading").style.display = "none";
    gsap.to("#splashbg1", { duration: 1, ease: "Power4.inOut", scaleX: 0 });
    gsap.to("#splashbg2", { duration: 1, ease: "Power4.inOut", scaleX: 0 });
  }
});

gsap.to("#splashbg1", {duration: 1, ease: "Power4.inOut", saleX: 0});

この記述により、id=splashbg1のdivタグが、１秒間で横方向に縮んでゼロとなります。もともとCSSでtransform-origin: left と指定していたので左端を起点として縮むことになり、左へ開いたように見えるのです。

GSAPのeaseプロパティでアニメーションの変化タイミングを指定できます。こちらを参照ください。

出来上がったローダー

こうして出来上がったのが、こちらのデモサイトです。

動画はこちら。

もともとのローダーのみの動画です。好みで使い分けるとよいでしょう。

まとめ

ローダーに背景色が左右に開く画面遷移を追加してみました。追加した項目は以下の通りです。

1. カスタムHTMLブロックでdivタグを２つ準備
2. カスタムCSSの追記
   （divタグにローダーと同じ背景色をつけて、ローダーの下層レイヤーにposition: fixedで設置）
3. JavaScriptの追記
   （GSAPライブラリ表記でdivタグを横方向に縮小してゼロ化する）

非常に簡単に背景色の遷移を導入できました。左右に開く背景のほか、上下に開けたり、単純に左から右へ遷移させるなど、いろいろな応用が可能です。