JavaScript でページ読み込み時にページをふんわりと表示させる方法

2015/05/18 JavaScript jQuery

JavaScript を使って HTML ページの読み込み時にページをふんわりとフェードインで表示させる方法をご紹介します。

フェードインで表示させるには、ページの opacity をいったん 0 （透明）にしておいてその後にアニメーションで 1 （不透明）に戻していきます。 jQuery を使うとアニメーション処理がかんたんです。

var DURATION = 400,
    LAG = 200;

$(function() {
  // 実際にページの読み込み時に処理を行う
  initializePageOpacity(DURATION, LAG);
});

// ページロード時にページの透過度を設定する
// opacity: 透過度
// duration: 変更にかける所要時間
// lag: 変更を開始するまでの時間
function initializePageOpacity(duration, lag) {
  setBodyOpacity(0, 1);
  setTimeout(function() {
    setBodyOpacity(1, duration);
  }, lag);
}

// ページの透過度を設定する
// opacity: 透過度
// duration: 変更にかける所要時間
function setBodyOpacity(opacity, duration) {
  $(document.body).animate({'opacity': opacity}, duration);
}

関数に分けるところやパラメータを定数的に扱うところは好みの問題なので、変更の必要がない場合はハードコードで書いてしまうのがよいかもしれません。