Webページのページ遷移時アニメーションを、ネイティブなJavaScriptで作ります。
アニメーションは、設置するページやアイデアに応じて、この記事を参考に活用してみてください。
.prepend()
JavaScriptの .prepend() は、指定した要素の中に文字列やHTML要素を追加することができるメソッドです。
documentBody.prepend(newElement);この記事では、body タグの下にオーバーレイの要素を .prepend() で挿入してオーバーレイを表示させています。
上から下に落ちるオーバーレイのサンプル
早速サンプルです。この記事でもオーバーレイを実装していますが、ページを開く時に上から下にオーバーレイが表示され、フェードインしながら記事の本文が表示されます。
ちなみにこのページから他のページに移動する場合は、白くフェードアウトして切り替わります。
実装の手順と方法
コードの解説の前に、ざっくりとした実装の手順と方法について解説します。
はじめにJavaScriptのコードをページに記述します。
コードは <body>〜</body> で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。
// bodyタグを取得
const documentBody = document.querySelector('body');
// body直下にオーバーレイの要素を作成
var newElement = document.createElement("div");
newElement.setAttribute("class","topCurtainbg");
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を記述します。
アニメーション系の記述もあるので、コード量が結構多いですがコピペすればOKです。
.topCurtainbg {
display: block;
content: "";
position:fixed;
z-index: 999;
width: 100%;
height: 100vh;
top: 0;
left: 0;
transform: scaleY(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:top;
transform:scaleY(0);
}
50% {
transform-origin:top;
transform:scaleY(1);
}
50.001% {
transform-origin:bottom;
}
100% {
transform-origin:bottom;
transform:scaleY(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;
}
}ざっくりとしたコードの解説
コードは、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","topCurtainbg");
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);別途HTMLをどこかに書いての準備が要らない分、JavaScriptでオーバーレイの要素を挿入するのでコード量は多いです。
CSS
CSSは主に、要素のアニメーションを指定するコードが多めです。
.topCurtainbg {
display: block;
content: "";
position:fixed;
z-index: 999;
width: 100%;
height: 100vh;
top: 0;
left: 0;
transform: scaleY(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:top;
transform:scaleY(0);
}
50% {
transform-origin:top;
transform:scaleY(1);
}
50.001% {
transform-origin:bottom;
}
100% {
transform-origin:bottom;
transform:scaleY(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」をいじればアニメーションを好みのものにできるので、いじってみてください。
CSSでいろんなことができますねぇ。
さいごに
ページ遷移時のアニメーションは、個人的にも好きな動きですが「上から下」や「左から右」などいろんな動きがあるので、自分好みのアニメーションを探してみてください。
