.prepend

JavaScriptの.prependでページ遷移時に丸い背景が縮小していくオーバーレイを表示

2022年8月1日 6分

ページ遷移時に、フルスクリーンで出すオーバーレイを少し丸くしてみます。

丸くするだけで、比較的大人しく、親しみやすい雰囲気を出すには向いている印象になります。

かかかず

ページ遷移後に表示されるフォントが丸ゴ等、要素・オブジェクトが丸っこいと相性が良いかもしれません。

今回は、ページ遷移時に丸い背景が縮小していくオーバーレイを表示する方法をJavaScriptのコードを交え解説していきます。

.prepend
ページ遷移時に丸い背景が縮小していくオーバーレイサンプル
実装の手順と方法
ざっくりとしたコードの解説
さいごに

.prepend

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

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

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

かかかず

.prepend() を使うことで、要素を追加してくれます。

ページ遷移時に丸い背景が縮小していくオーバーレイサンプル

早速、サンプルです。

ページの「流入時」にフルスクリーンの白い背景から黒い丸のオブジェクトが表示され、中央に向かって縮小しながらアニメーションで表示されます。

そして、ページの「離脱時」には白くフェードアウトしてページ遷移が行われます。

かかかず

もう1回アニメーションを見る場合は「ページ更新」ボタンのクリックで見れます。

実装の手順と方法

コードの解説の前に、ざっくりとした実装の手順と方法について解説します。HTMLがないので、2つのSTEPで完了します。

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: 1000px;
    height: 1000px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #313131;
    animation-name: circleZoomOut;
    animation-duration: 1.4s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    border-radius: 9999px;
}

@keyframes circleZoomOut {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
    }
    50% {
        opacity: 1
    }
    90% {
        opacity: 0
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.1);
    }
}

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

#container{
	opacity: 0;
}

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;
}
}

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

コードは、前述の通りHTMLはJavaScriptで挿入するので、JavaScript・CSSの2種類です。この2種類のコードについて解説していきます。

JavaScript

JavaScriptは、処理内容をおおまかに言うと「body タグ直下に要素を挿入」「body タグにclassを付与してオーバーレイ表示」「ページ遷移時のフェードアウト」の3つです。

// 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);

この中で冒頭の「body タグ直下に要素を挿入」の処理では、.setAttribute で追加する要素にclassを付与する記述が2回ほどあります。

かかかず

コードの前半部分が要素を追加する内容で、コード量が多めです。

JavaScriptのコードを分離してHTMLで記述する場合

コードの冒頭に、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: 1000px;
    height: 1000px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #313131;
    animation-name: circleZoomOut;
    animation-duration: 1.4s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    border-radius: 9999px;
}

@keyframes circleZoomOut {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
    }
    50% {
        opacity: 1
    }
    90% {
        opacity: 0
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.1);
    }
}

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

#container{
	opacity: 0;
}

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;
}
}

丸いオーバーレイの背景は position: fixed; と、top: 50%; left:50%に transform: translate(-50%, -50%); を記述して中央寄せにしています。

そして、アニメーションの @keyframes circleZoomOut で透過性を持たせる為に transform を使っているので、アニメーションを定義する中でも transform: translate(-50%, -50%) scale(1.5); のように transform: translate(-50%, -50%); を記述しています。

かかかず

アニメーションにも transform: translate(-50%, -50%); を記述しないと、起点位置が変なところからアニメーションが発動します。