JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

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

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptのsetTimeout()でフェードイン・フェードアウトしてふわっとページを切り替え

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

setTimeout()

JavaScriptのsetTimeout()でフェードイン・フェードアウトしてふわっとページを切り替え

JavaScriptのsetTimeout()でフェードイン・フェードアウトしてふわっとページを切り替え

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() のコードを両方ともいじりましょう。