• RSS

[JS]jQuery の fadeIn() でページ読込み時にフェードインで要素を表示する

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイトにアクセスしたら、ページ全体をボワ〜ッと徐々にフェードインで表示させる方法です。

jQuery の fadeIn() を使うだけの簡単な処理ですし、フェードインの微調整(時間調整)次第で効果的な演出も可能になるかと思います。

fadeIn() でページ読込み時にフェードイン


Javascrit の記述

<head> 内に jquery ファイルと一緒に以下のような記述を追加します。
<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 を与えて全体を非表示にしておきます。
body	{
display:none
}

↓デモはこんな感じです。
jQuuery の fadeIn() を使ったフェードイン表示のデモ


特定の要素をフェードイン

今回はページ全体をフェードンで表示させましたが、body ではなく特定の要素を対象にすることも可能です。
<script src="./jquery.min.js"></script>
<script>
$(document).ready(function() {
$('対象となる要素').fadeIn(2000);
});
</script>



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

  1. はじめまして!
    うまくいかないので質問させてもらいます!

    上記のプログラムを入力したのですが、なかなかうまくいきません;
    どこか間違っていたら教えてほしいです!

    ソースは↓です。
    あと背景はCSSでやっています。



    YuFrPro



    $(‘document’).ready(function() {
    $(‘body’).fadeIn(2000);
    });





    alert(‘ようこそ!\nYuFrProへ!’);



    1. はじめまして、お問い合わせ有り難うございます。
      WEBアンテナの管理者です。

      すでに対応いただいたモノも含まれるかもしれませんが、
      いただいたソースだけで判断しますと、

      ・$(‘document’) は $(document) のように引用符なし。
      ・jquery.min.js ファイルの読み込みが行われているかどうか
      ・CSSでbody を display:none にしてあげる。

      でいかがでしょうか。

コメントを残す