ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

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

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

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

全面背景色のみ表示

loaderテキストがフェイドイン

loaderテキストがフェイドアウト

全面背景色がフェイドアウト

コンテンツを表示

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

全面背景色のみ表示

loaderテキストがフェイドイン

loaderテキストがフェイドアウト

全面背景色がフェイドアウト

フェイドアウト後も全面背景色が表示

背景色が左右に開く

コンテンツを表示

この記事でわかること

オープニングローダーを表示後に、背景色が左右に開いてコンテンツ表示する方法。仕組みとしては以下の通りです。

  • ローダー部の下層レイヤーとして背景色を2つのdivタグで配置しておく
  • ローダー部がフェイドアウト後、JavaScriptで2つのdivタグを左右に縮める

※jQueryは使用せず、JavaScriptのライブラリであるGSAPを使用し、簡単な記述でアニメーションしていきます。

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

ブロックの構成

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

loader部とコンテンツ部の構成

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

本記事で作成するブロック構成

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

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

この2つの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タグが、1秒間で横方向に縮んでゼロとなります。もともとCSSでtransform-origin: left と指定していたので左端を起点として縮むことになり、左へ開いたように見えるのです。

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

出来上がったローダー

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

動画はこちら。

ローダー表示後背景色が左右にOPEN

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

ローダー表示後ヒーローイメージ表示

まとめ

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

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

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

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる