
この記事は2014年9月15日に書かれたもので、内容が古い可能性がありますのでご注意ください。
ページ読み込み時に「ふわっと」表示されるサイトをよく見かけます。
この動きがあるとサイトの質がワンランク上がりますよね。
短いソースで実装可能ですので、ぜひ試してみてください。
HTMLは気にすることなく進めてしまって問題ないです。
そしてjQueryの記述ですが、
まずjQuery本体の記述の後に下記ソースを追加します。
$('head').append( '<style type="text/css">body {display:none;}</style>' ); $(window).load(function() { $('body').fadeIn("slow"); });
ソースの内容
1~3行目でbody全体を強制的に非表示にさせる。
$(‘head’).append(★); … head要素の末尾に内包されているコード(★)を追加。
body {display:none;} … body要素を非表示にするCSS。
4~6行目で「ふわっと表示」の指示をする。
$(window).load(function() {★}); … 画面読み込みが完了したら内包されているコード(★)を実行。
$(‘body’).fadeIn(“slow”); … body全体をゆっくりフェードインさせる。
ふわっと表示させるにはfadeIn(speed)というコードを利用するのが便利です。
逆にふわっと非表示にさせることも可能です。その場合はfadeOut(speed)を利用します。
こちらのサイトに詳細が記載されています。
jQuery 日本語リファレンス
宜しければご参考にどうぞ。