JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

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

ツールチップ

ヘッダー

テーブル

グラフ

背景

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

openBD

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

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

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

.prepend

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

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

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

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

かかかず
かかかず

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

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

.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%); を記述しないと、起点位置が変なところからアニメーションが発動します。

さいごに

いかがでしたでしょうか?

「ページ遷移時」の他のバリエーションも当サイトで紹介していますが、オーバーレイに丸ばった要素を表示させるだけで、角張ったものよりは柔らかい印象になると思います。

そんな印象の違いもあるので、サイトの雰囲気に応じて活用してみてください。