.prepend()

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

2022年4月20日 6分

過度な動きや、ダイナミックすぎるアニメーションはむしろユーザーのストレスになるので、気をつけたいところですが、適度なアニメーションは平坦なホームページより確実にユーザーの興味を引くことができます。

そんなアニメーションですが、この記事では「ページ遷移時」がトリガーになるアニメーションを作ってみました。

かかかず

カーテンが真ん中から外に向かって開くアニメーションです。

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

.prepend()
ページ遷移時に真ん中から開くカーテンのサンプル
実装の手順と方法
ざっくりとしたコードの解説
- JavaScript
- CSS
さいごに

.prepend()

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

documentBody.prepend(newElement1);

この記事では、ページ表示の時に表示されるオーバーレイは、このメソッドで2つの要素を挿入して表示させています。

ページ遷移時に真ん中から開くカーテンのサンプル

早速サンプルですが、ページ遷移時に真ん中からそれぞれ左と右に、カーテンが開くようなオーバーレイが表示されます。

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

かかかず

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

実装の手順と方法

コードの解説の前に、実装の手順と方法です。手順は2つで完了します。

JavaScriptを記述

JavaScriptのコードをページに記述します。

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

コードを表示

// bodyタグを取得
const documentBody = document.querySelector('body');
// body直下に右から左のカーテン
var newElement1 = document.createElement("div");
newElement1.setAttribute("class","leftCurtainbg");
documentBody.prepend(newElement1);
// body直下に左から右のカーテン
var newElement2 = document.createElement("div");
newElement2.setAttribute("class","rightCurtainbg");
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です。

コードを表示

.leftCurtainbg, .rightCurtainbg {
    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;
}

.leftCurtainbg {
    right: 50%;
    transform: scaleX(0);
    animation-name:curtainAnimeLeft;
}

.rightCurtainbg {
    left: 50%;
    transform: scaleX(1);
    animation-name:curtainAnimeRight;
}

@keyframes curtainAnimeLeft {
	0% {
		transform-origin:right;
		transform:scaleX(1);
	}
	50% {
		transform-origin:left;
	}
	100% {
		transform-origin:left;
		transform:scaleX(0);
	}
}

@keyframes curtainAnimeRight {
	0% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(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;
}
}

かかかず

アニメーション部分は、@keyframes の部分をいじれば動きを変更できます。

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

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

JavaScript

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

// bodyタグを取得
const documentBody = document.querySelector('body');
// body直下に右から左のカーテン
var newElement1 = document.createElement("div");
newElement1.setAttribute("class","leftCurtainbg");
documentBody.prepend(newElement1);
// body直下に左から右のカーテン
var newElement2 = document.createElement("div");
newElement2.setAttribute("class","rightCurtainbg");
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="leftCurtainbg"></div>
<div class="rightCurtainbg"></div>

かかかず

body タグの直下に記述しましょう。

CSS

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

.leftCurtainbg, .rightCurtainbg {
    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;
}

.leftCurtainbg {
    right: 50%;
    transform: scaleX(0);
    animation-name:curtainAnimeLeft;
}

.rightCurtainbg {
    left: 50%;
    transform: scaleX(1);
    animation-name:curtainAnimeRight;
}

@keyframes curtainAnimeLeft {
	0% {
		transform-origin:right;
		transform:scaleX(1);
	}
	50% {
		transform-origin:left;
	}
	100% {
		transform-origin:left;
		transform:scaleX(0);
	}
}

@keyframes curtainAnimeRight {
	0% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(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の付け替えが多いので、それに連動させるよう記述しましょう。