JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptの.prepend()でページ遷移時に中央から上下に開くオーバーレイを表示して切り替え

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.prepend()

JavaScriptの.prepend()でページ遷移時に中央から上下に開くオーバーレイを表示して切り替え

JavaScriptの.prepend()でページ遷移時に中央から上下に開くオーバーレイを表示して切り替え

アニメーションでページに動きを与える方法は有効ですが、むやみにアニメーションを使えばよいというわけではないので、注意したいところです。

そんなアニメーションでも、ページ遷移のアニメーションをつけると「状態の変化」が一目瞭然なので、個人的には好きなアニメーションです。

かかかず
かかかず

過度にならないアニメーションは心地いいです。

この記事では、ページ遷移時に中央から上下に開くオーバーレイを表示して切り替えるアニメーションについて解説しています。

是非、最後までご覧いただけると嬉しいです。

.prepend()

JavaScriptの .prepend() は、オブジェクトを指定した要素の最初の子の前に挿入するメソッドです。

documentBody.prepend(newElement1);

この記事ではこのメソッドで、上部と下部のオーバーレイを作りCSSでアニメーションをつけた形で表示させています。

中央から上下に開くオーバーレイのサンプル

早速サンプルです。ページ遷移時に真ん中から上下に開くようにしてオーバーレイが表示されます。

そして表示終了後には、フェードインしながら記事全体が表示されます。

かかかず
かかかず

もう1回動きをご覧になりたい方は、上にある「ページ更新」のボタンをクリックしてご覧ください。

実装の手順と方法

手順と方法

コードの解説の前に、実装の手順と方法です。手順は、JavaScriptとCSSのコードを設置する2つのSTEPで完了します。

JavaScriptを記述

JavaScriptのコードをページに記述します。このコードで、上下に開くオーバーレイの要素をHTMLに追加してくれます。

コードは <body>〜</body> で、</body> の閉じタグ(クロージングタグ)の前に記述しましょう。

// bodyタグを取得
const documentBody = document.querySelector('body');
// body直下に上部のカーテン
var newElement1 = document.createElement("div");
newElement1.setAttribute("class","topCurtainbg");
documentBody.prepend(newElement1);
// body直下に下部のカーテン
var newElement2 = document.createElement("div");
newElement2.setAttribute("class","bottomCurtainbg");
documentBody.prepend(newElement2);


// bodyタグにclassを付与
documentBody.classList.add('pageOn');

// 1.5秒経ったらオーバーレイ非表示
setTimeout(function(){ 
    newElement1.style.display = "none";
    newElement2.style.display = "none";
  }, 1500);

// ページ遷移時にフェードアウト
window.addEventListener("beforeunload", () => {
  documentBody.classList.add('fadeout');
  setTimeout(function(){ 
    documentBody.style.display = "none"; 
  }, 1000);
}, false);
CSSを記述

次に、CSSを記述します。

アニメーション系の記述もあるので、コード量が結構多いですがコピペすればOKです。

.topCurtainbg, .bottomCurtainbg {
    display: block;
    content: "";
    position:fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
    background-color: #313131;
    animation-duration:1.2s;
    animation-timing-function:ease-in-out;
    animation-fill-mode:forwards;
}

.topCurtainbg {
    top: 0%;
    transform: scaleY(0);
    animation-name:curtainAnimeTop;
}

.bottomCurtainbg {
    left: 0%;
    bottom: 0%;
    transform: scaleY(1);
    animation-name:curtainAnimeBottom;
}

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

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

.fadeout {
  animation : fadeOut 0.8s;
  animation-fill-mode: both;
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/*bodyにpageOnクラスがついたら出現*/
body.pageOn #container{
	animation-name:PageAnimeOn;
	animation-duration:1s;
	animation-delay: 0.2s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes PageAnimeOn{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

ざっくりとしたコードの解説

コードはJavaScript・CSSの2種類です。コードについて解説していきます。

JavaScript

JavaScriptは、主に「body直下にオーバーレイのタグを追加」「表示の時のフェードイン」「離脱時のフェードアウト」の3つです。

// bodyタグを取得
const documentBody = document.querySelector('body');
// body直下に上部のカーテン
var newElement1 = document.createElement("div");
newElement1.setAttribute("class","topCurtainbg");
documentBody.prepend(newElement1);
// body直下に下部のカーテン
var newElement2 = document.createElement("div");
newElement2.setAttribute("class","bottomCurtainbg");
documentBody.prepend(newElement2);


// bodyタグにclassを付与
documentBody.classList.add('pageOn');

// 1.5秒経ったらオーバーレイ非表示
setTimeout(function(){ 
    newElement1.style.display = "none";
    newElement2.style.display = "none";
  }, 1500);

// ページ遷移時にフェードアウト
window.addEventListener("beforeunload", () => {
  documentBody.classList.add('fadeout');
  setTimeout(function(){ 
    documentBody.style.display = "none"; 
  }, 1000);
}, false);

コードの冒頭に、JavaScriptで div タグの挿入するコードを入れています。コードのコメントアウトしてある「// body直下に上部のカーテン」「// body直下に下部のカーテン」の各4行(※コメントアウト含む)、合計8行がそのコードです。

このコードは、HTMLで別途記述することが可能です。その場合は、コメントアウトしてある当該箇所を削除の上、HTMLに以下のコードを任意の箇所に記述しましょう。

<div class="topCurtainbg"></div>
<div class="bottomCurtainbg"></div>
かかかず
かかかず

HTMLを別途記述する場合は、body タグの直下に記述しましょう。

CSS

CSSは、閲覧開始時の「カーテンのオーバーレイ」と「フェードイン」。ページ離脱時の「フェードアウト」にそれぞれ @keyframes でアニメーションを記述します。

.topCurtainbg, .bottomCurtainbg {
    display: block;
    content: "";
    position:fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
    background-color: #313131;
    animation-duration:1.2s;
    animation-timing-function:ease-in-out;
    animation-fill-mode:forwards;
}

.topCurtainbg {
    top: 0%;
    transform: scaleY(0);
    animation-name:curtainAnimeTop;
}

.bottomCurtainbg {
    left: 0%;
    bottom: 0%;
    transform: scaleY(1);
    animation-name:curtainAnimeBottom;
}

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

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

.fadeout {
  animation : fadeOut 0.8s;
  animation-fill-mode: both;
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/*bodyにpageOnクラスがついたら出現*/
body.pageOn #container{
	animation-name:PageAnimeOn;
	animation-duration:1s;
	animation-delay: 0.2s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes PageAnimeOn{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

コピペであれば問題ありませんが、一部カスタマイズする時はclassの付け替えが多いので、それに連動させるよう記述しましょう。

さいごに

先生

ページ遷移時には、横方向へのオーバーレイは比較的よく見かけますが、縦方向のオーバーレイもこれはこれでなかなかありなアニメーションです。

是非、参考にしてみてください。