アニメーションでページに動きを与える方法は有効ですが、むやみにアニメーションを使えばよいというわけではないので、注意したいところです。
そんなアニメーションでも、ページ遷移のアニメーションをつけると「状態の変化」が一目瞭然なので、個人的には好きなアニメーションです。
過度にならないアニメーションは心地いいです。
この記事では、ページ遷移時に中央から上下に開くオーバーレイを表示して切り替えるアニメーションについて解説しています。
是非、最後までご覧いただけると嬉しいです。
.prepend()
JavaScriptの .prepend() は、オブジェクトを指定した要素の最初の子の前に挿入するメソッドです。
documentBody.prepend(newElement1);この記事ではこのメソッドで、上部と下部のオーバーレイを作りCSSでアニメーションをつけた形で表示させています。
中央から上下に開くオーバーレイのサンプル
早速サンプルです。ページ遷移時に真ん中から上下に開くようにしてオーバーレイが表示されます。
そして表示終了後には、フェードインしながら記事全体が表示されます。
もう1回動きをご覧になりたい方は、上にある「ページ更新」のボタンをクリックしてご覧ください。
実装の手順と方法
コードの解説の前に、実装の手順と方法です。手順は、JavaScriptとCSSのコードを設置する2つのSTEPで完了します。
JavaScriptのコードをページに記述します。このコードで、上下に開くオーバーレイの要素をHTMLに追加してくれます。
コードは <body>〜</body> で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。
// bodyタグを取得
const documentBody = document.querySelector('body');
// body直下に上部のカーテン
var newElement1 = document.createElement("div");
newElement1.setAttribute("class","topCurtainbg");
documentBody.prepend(newElement1);
// body直下に下部のカーテン
var newElement2 = document.createElement("div");
newElement2.setAttribute("class","bottomCurtainbg");
documentBody.prepend(newElement2);
// bodyタグにclassを付与
documentBody.classList.add('pageOn');
// 1.5秒経ったらオーバーレイ非表示
setTimeout(function(){
newElement1.style.display = "none";
newElement2.style.display = "none";
}, 1500);
// ページ遷移時にフェードアウト
window.addEventListener("beforeunload", () => {
documentBody.classList.add('fadeout');
setTimeout(function(){
documentBody.style.display = "none";
}, 1000);
}, false);次に、CSSを記述します。
アニメーション系の記述もあるので、コード量が結構多いですがコピペすればOKです。
.topCurtainbg, .bottomCurtainbg {
display: block;
content: "";
position:fixed;
z-index: 999;
width: 100%;
height: 100vh;
top: 0;
background-color: #313131;
animation-duration:1.2s;
animation-timing-function:ease-in-out;
animation-fill-mode:forwards;
}
.topCurtainbg {
top: 0%;
transform: scaleY(0);
animation-name:curtainAnimeTop;
}
.bottomCurtainbg {
left: 0%;
bottom: 0%;
transform: scaleY(1);
animation-name:curtainAnimeBottom;
}
@keyframes curtainAnimeTop {
0% {
transform-origin:top;
transform:scaleY(1);
}
50% {
transform-origin:top;
}
100% {
transform-origin:top;
transform:scaleY(0);
}
}
@keyframes curtainAnimeBottom {
0% {
transform-origin:bottom;
transform:scaleY(1);
}
50% {
transform-origin:bottom;
}
100% {
transform-origin:bottom;
transform:scaleY(0);
}
}
.fadeout {
animation : fadeOut 0.8s;
animation-fill-mode: both;
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/*bodyにpageOnクラスがついたら出現*/
body.pageOn #container{
animation-name:PageAnimeOn;
animation-duration:1s;
animation-delay: 0.2s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes PageAnimeOn{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}ざっくりとしたコードの解説
コードはJavaScript・CSSの2種類です。コードについて解説していきます。
JavaScript
JavaScriptは、主に「body直下にオーバーレイのタグを追加」「表示の時のフェードイン」「離脱時のフェードアウト」の3つです。
// bodyタグを取得
const documentBody = document.querySelector('body');
// body直下に上部のカーテン
var newElement1 = document.createElement("div");
newElement1.setAttribute("class","topCurtainbg");
documentBody.prepend(newElement1);
// body直下に下部のカーテン
var newElement2 = document.createElement("div");
newElement2.setAttribute("class","bottomCurtainbg");
documentBody.prepend(newElement2);
// bodyタグにclassを付与
documentBody.classList.add('pageOn');
// 1.5秒経ったらオーバーレイ非表示
setTimeout(function(){
newElement1.style.display = "none";
newElement2.style.display = "none";
}, 1500);
// ページ遷移時にフェードアウト
window.addEventListener("beforeunload", () => {
documentBody.classList.add('fadeout');
setTimeout(function(){
documentBody.style.display = "none";
}, 1000);
}, false);コードの冒頭に、JavaScriptで div タグの挿入するコードを入れています。コードのコメントアウトしてある「// body直下に上部のカーテン」「// body直下に下部のカーテン」の各4行（※コメントアウト含む）、合計8行がそのコードです。
このコードは、HTMLで別途記述することが可能です。その場合は、コメントアウトしてある当該箇所を削除の上、HTMLに以下のコードを任意の箇所に記述しましょう。
<div class="topCurtainbg"></div>
<div class="bottomCurtainbg"></div>HTMLを別途記述する場合は、body タグの直下に記述しましょう。
CSS
CSSは、閲覧開始時の「カーテンのオーバーレイ」と「フェードイン」。ページ離脱時の「フェードアウト」にそれぞれ @keyframes でアニメーションを記述します。
.topCurtainbg, .bottomCurtainbg {
display: block;
content: "";
position:fixed;
z-index: 999;
width: 100%;
height: 100vh;
top: 0;
background-color: #313131;
animation-duration:1.2s;
animation-timing-function:ease-in-out;
animation-fill-mode:forwards;
}
.topCurtainbg {
top: 0%;
transform: scaleY(0);
animation-name:curtainAnimeTop;
}
.bottomCurtainbg {
left: 0%;
bottom: 0%;
transform: scaleY(1);
animation-name:curtainAnimeBottom;
}
@keyframes curtainAnimeTop {
0% {
transform-origin:top;
transform:scaleY(1);
}
50% {
transform-origin:top;
}
100% {
transform-origin:top;
transform:scaleY(0);
}
}
@keyframes curtainAnimeBottom {
0% {
transform-origin:bottom;
transform:scaleY(1);
}
50% {
transform-origin:bottom;
}
100% {
transform-origin:bottom;
transform:scaleY(0);
}
}
.fadeout {
animation : fadeOut 0.8s;
animation-fill-mode: both;
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/*bodyにpageOnクラスがついたら出現*/
body.pageOn #container{
animation-name:PageAnimeOn;
animation-duration:1s;
animation-delay: 0.2s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes PageAnimeOn{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}コピペであれば問題ありませんが、一部カスタマイズする時はclassの付け替えが多いので、それに連動させるよう記述しましょう。
さいごに
ページ遷移時には、横方向へのオーバーレイは比較的よく見かけますが、縦方向のオーバーレイもこれはこれでなかなかありなアニメーションです。
是非、参考にしてみてください。
