.prepend

JavaScriptの.prepend()でページ遷移時に左から右にカーテン状のオーバーレイを表示

2022年4月17日2022年4月20日 5分

いろんなことができるCSSアニメーションと、JavaScriptのと setTimeout() と、.prepend() を組み合わせてページ遷移時のアニメーションを作りました。

かかかず

ページの見た目だけじゃなく、ユーザーの体験も作るページ遷移です。

この記事では、左から右にオーバーレイが表示される巣にペットについて解説していきます。ぜひ参考にしてみてください。

.prepend
カーテンを表示するサンプル
実装の手順と方法
ざっくりとしたコードの解説
- JavaScript
- CSS
さいごに

.prepend

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

// documentBodyの最初の子の前にnewElementを挿入
documentBody.prepend(newElement);

この記事では、この prepend() で2種類の要素を追加してオーバーレイを作っています。

カーテンを表示するサンプル

早速サンプルです。ページローディング時、まずはじめに body タグの全体が透過して、その後に画面全体を左から右にカーテン状のオーバーレイが表示された後、body タグに記載した本体の要素が表示されます。

かかかず

この記事でもこのスニペットで表示させていますが、もう一回見る場合上記のボタンでぺーじ更新してみてください。

実装の手順と方法

コードの解説の前に、ざっくりとした実装の手順と方法について解説します。

JavaScriptを記述

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

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

コードを表示

// bodyタグを取得
const documentBody = document.querySelector('body');
// body直下にオーバーレイの要素を作成
var newElement = document.createElement("div");
newElement.setAttribute("class","leftCurtainbg");
documentBody.prepend(newElement);
// オーバーレイの次に要素を作成
var coverElement = document.createElement("div");
coverElement.setAttribute("id","container");
newElement.prepend(coverElement);
// bodyタグにclassを付与
documentBody.classList.add('pageOn');

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

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

CSSを記述

次に、CSSを記述します。

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

コードを表示

.leftCurtainbg {
    display: block;
    content: "";
    position:fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    transform: scaleX(0);
    background-color: #313131;
    animation-name:curtainAnime;
    animation-duration:1.2s;
    animation-timing-function:ease-in-out;
    animation-fill-mode:forwards;
}

@keyframes curtainAnime {
	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);
	}
}

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

#container{
	opacity: 0;/*はじめは透過0に*/
}

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

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

かかかず

CSSのアニメーションの秒数を変更する場合、JavaScriptの setTimeout もいじるようにしましょう。

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

コードは、JavaScriptとCSSの2種のみで、HTMLはJavaScriptで要素を作成して挿入するので不要です。この2種類のコードを、順に解説していきます。

JavaScript

JavaScriptは、大きく分けて「オーバーレイの要素を作成」「bodyをフェードインさせる要素」「ページ遷移時のフェードアウト」の3つです。

// bodyタグを取得
const documentBody = document.querySelector('body');
// body直下にオーバーレイの要素を作成
var newElement = document.createElement("div");
newElement.setAttribute("class","leftCurtainbg");
documentBody.prepend(newElement);
// オーバーレイの次に要素を作成
var coverElement = document.createElement("div");
coverElement.setAttribute("id","container");
newElement.prepend(coverElement);
// bodyタグにclassを付与
documentBody.classList.add('pageOn');

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

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

コード量は、要素をJavaScriptの .createElement() で作っていくので多少多めのコード量です。

CSS

CSSは主に、JavaScriptで作った要素のアニメーションを指定するコードが多めです。

.leftCurtainbg {
    display: block;
    content: "";
    position:fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    transform: scaleX(0);
    background-color: #313131;
    animation-name:curtainAnime;
    animation-duration:1.2s;
    animation-timing-function:ease-in-out;
    animation-fill-mode:forwards;
}

@keyframes curtainAnime {
	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);
	}
}

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

#container{
	opacity: 0;/*はじめは透過0に*/
}

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

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

カーテンのアニメーションは、@keyframesで指定している「curtainAnime」の箇所を色々いじればいろんな形態のアニメーションができるので、好みに応じていじってみてください。