JavaScript でページ読み込み時にページをふんわりと表示させる方法
2015/05/18JavaScriptjQuery
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);}
関数に分けるところやパラメータを定数的に扱うところは好みの問題なので、変更の必要がない場合はハードコードで書いてしまうのがよいかもしれません。