サイトにアクセスしたら、ページ全体をボワ〜ッと徐々にフェードインで表示させる方法です。
jQueryのfadeIn()を使うだけの簡単な処理ですし、フェードインの微調整（時間調整）次第で効果的な演出も可能になるかと思います。
fadeIn()でページ読込み時にフェードイン
Javascrit の記述
<head>内にjqueryファイルと一緒に以下のような記述を追加します。|
1 2 3 4 5 6 |
<script src="./jquery.min.js"></script> <script> $(document).ready(function() { $('body').fadeIn(2000); }); </script> |
ページ全体がフェードイン表示されるよう、今回はbodyを対象にしています。
fadeIn()には「slow」「normal」「fast」 の値を指定することができますし、上記例のfadeIn(2000)のように数値（ミリ秒）を入れることもできますので、ここはサイトに合わせて調整してみてください。
※2000ms = 2秒でフェードインします。
CSSの記述
CSSでbodyにdisplay:noneを与えて全体を非表示にしておきます。
|
1 2 3 |
body { display:none } |
↓デモはこんな感じです。
jQuueryのfadeIn() を使ったフェードイン表示のデモ
特定の要素をフェードイン
今回はページ全体をフェードンで表示させましたが、bodyではなく特定の要素を対象にすることも可能です。|
1 2 3 4 5 6 |
<script src="./jquery.min.js"></script> <script> $(document).ready(function() { $('対象となる要素').fadeIn(2000); }); </script> |
コメント
はじめまして！
うまくいかないので質問させてもらいます！
上記のプログラムを入力したのですが、なかなかうまくいきません；
どこか間違っていたら教えてほしいです！
ソースは↓です。
あと背景はCSSでやっています。
YuFrPro
$(‘document’).ready(function() {
$(‘body’).fadeIn(2000);
});
alert(‘ようこそ！\nYuFrProへ！’);
はじめまして、お問い合わせ有り難うございます。
WEBアンテナの管理者です。
すでに対応いただいたモノも含まれるかもしれませんが、
いただいたソースだけで判断しますと、
・$(‘document’) は $(document) のように引用符なし。
・jquery.min.js ファイルの読み込みが行われているかどうか
・CSSでbody を display:none にしてあげる。
でいかがでしょうか。