.prepend()

JavaScriptの.prependでページ遷移時に中央から拡大するオーバーレイを表示

2022年5月3日 6分

心地よいエフェクトでページが切り替わるのは、個人的にも好きな体験です。

この記事ではそんなエフェクトを、ネイティブなJavaScriptで作ってみました。

かかかず

ページの遷移時に中央から外側に向かって拡大されるアニメーションです。

ページ遷移にさりげないエフェクトを取り入れることで良いアクセントになるので、是非この記事を参考にしてみてください。

.prepend
ページ遷移時に中央から拡大するオーバーレイのサンプル
実装の手順と方法
ざっくりとしたコードの解説
- JavaScript
- CSS
さいごに

.prepend

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

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

かかかず

.prepend() は便利なメソッドで、ページ遷移系のコードでよく使ってます。

この記事では、この .prepend() でHTMLの要素を追加してオーバーレイを作ります。

ページ遷移時に中央から拡大するオーバーレイのサンプル

早速サンプルです。ページ遷移時に真ん中からオーバーレイがフェードインしながら表示され、徐々に画面を覆い隠すように拡大されていきます。

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

かかかず

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

実装の手順と方法

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

JavaScriptを記述

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

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

コードを表示

// bodyタグを取得
const documentBody = document.querySelector('body');
// body直下にオーバーレイの要素を作成
var newElement = document.createElement("div");
newElement.setAttribute("class","zoomCurtainbg");
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です。

コードを表示

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

/* zoomIn */
@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(0.3, .3, 0.3);
    }
    50% {
        opacity: 1
    }
    90% {
        opacity: 0
    }
    100% {
        opacity: 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種類です。コードについて解説していきます。

JavaScript

// bodyタグを取得
const documentBody = document.querySelector('body');
// body直下にオーバーレイの要素を作成
var newElement = document.createElement("div");
newElement.setAttribute("class","zoomCurtainbg");
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で div タグの挿入するコードを入れています。コードのコメントアウトしてある「// body直下にオーバーレイの要素を作成」の各4行（※コメントアウト含む）がそのコードです。

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

<div class="zoomCurtainbg"></div>

かかかず

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

CSS

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

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

/* zoomIn */
@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(0.3, .3, 0.3);
    }
    50% {
        opacity: 1
    }
    90% {
        opacity: 0
    }
    100% {
        opacity: 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;
}
}

オーバーレイの要素は、transform: scale3d を使って大きさを変えながら、opacity のプロパティでフェードイン・フェードアウトを作ります。