gotohayato.com

moon indicating dark mode
sun indicating light mode

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);
}

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


後藤隼人
ウェブサイト制作・ウェブアプリ開発やマーケティングをしています。
GitHub
© 2020 gotohayato.com
サイトについてタグアーカイブメッセージを送る