JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

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

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

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

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

.prepend()

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

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

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

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

かかかず
かかかず

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

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

.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 のプロパティでフェードイン・フェードアウトを作ります。

さいごに

先生

アニメーションを入れると動きが出てくるで、自然とユーザーの目を惹きつけることができますが、ページ遷移意外にも複数のアニメーションを盛りすぎると、しつこくなってしまうので注意するようにしましょう。