CSSの「@keyframes」で指定したアニメーションを、setTimeout()のタイマーで動かせてフェードイン・フェードアウトさせるスニペットを作りました。
ちなみにこのスニペットはHTMLの記述がないので、外部ファイル化して設置すれば管理も簡単です。
設置するだけでページ遷移・離脱時にふわっとなり、少し動きを付けたい方は参考にしてみてください。
setTimeout()
JavaScriptの setTimeout() は、タイマーを設定するメソッドです。
setTimeout(function(){
element.style.display = "none";
}, 1500);この記事では、「1500（1.5秒）」と「1000（1秒）」で指定したミリ秒の単位で指定をして、時間切れになると関数を実行させています。
jQueryだと「fadeOut()」メソッドみたいなのをこの setTimeout() で使用しています。
フェードイン・フェードアウトするサンプル
早速サンプルです。
この記事ページにも実装していますが、ページを閲覧時にはフェードインしながら表示され、逆にページから離脱する時にはフェードアウトしながら離脱します。
何回か確認してご覧なりたい場合は、上記「ページ更新」ボタンを押してリロードしてみてください。
サンプルのコード
コードは、JavaScriptとCSSのみの2種類です。HTMLはないので、この2つについて解説します。
JavaScript
JavaScriptは、大きく分けて「bodyタグ直下に要素を設置」「フェードイン時の動き」「フェードアウト時の動き」の3種類です。
// bodyタグを取得
const documentBody = document.querySelector('body');
// body直下にオーバーレイの要素を作成
var newElement = document.createElement("div");
newElement.setAttribute("class","fade-layer");
documentBody.prepend(newElement);
// 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タグを取得して createElement() を使ってフェードイン時のオーバーレイを作り、その後は setTimeout() でそれぞれフェードイン・フェードアウトの動きを作ります。
フェードイン・フェードアウト時の秒数は、それぞれの setTimeout() のミリ秒の単位になっている「1500（1.5秒）」と「1000（1秒）」の箇所をいじりましょう。
CSS
CSSは、JavaScriptで生成する「fade-layer」のclass名がついたオーバーレイの要素と、アニメーションのみとシンプルな作りです。
.fade-layer
{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#fff;
z-index:99999;
animation : fadeIn 1.5s;
animation-fill-mode: both;
}
.fadeout {
animation : fadeOut 1s;
animation-fill-mode: both;
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeIn {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}ページ遷移時にあんまり長すぎるフェードイン・フェードアウトだとユーザーにストレスがかかるので、フェードインは「1.5秒」。フェードアウトは「1秒」にしています。
主観ですが、ストレスにならない程度にこの程度の秒数にしています。
秒数の調整をする場合は、CSSのと animation プロパティと、JavaScriptの setTimeout() のコードを両方ともいじりましょう。
