【jQuery】ほんの少しのコードでページ読み込み時にフェードインのエフェクトを追加する方法。

Ads by Google

ウェブページ読み込み時に「フワっ」とした感じのエフェクトでフェードインしながら表示させる方法です。

ここでは「これ以上簡単にはできないよ!」というくらい、ほんの僅かなコードで実装するテクニックを紹介します。

まずは HTML の記述方法から…。と言いたいところですが、今回紹介する方法では何も考えずにフツーにHTMLを書いてしまっても大丈夫です。
スタイルシートも使いません。
すべてをjQueryのコードだけでまかないます。

というワケでjQueryの記述方法です。
「fade.js」とでも名付けた JavaScript のファイルを用意して、その中に以下のように記述します。

$('head').append(
'<style type="text/css">body {display:none;}'
);
$(window).load(function() {
$('body').delay(600).fadeIn("slow");
});

説明すると、はじめの3行のコードでCSSを扱い、body {display:none;}を指定して要素を隠します。
直接CSS(スタイルシート)に記述しない理由は、ブラウザの設定でJavaScriptが無効になっていた場合、画面に何も表示されないという事態を避けるためです。
そこで上記のように JQuery に記述することでスクリプトファイルが読み込まれたときに<body>〜</body>の中身を一時的に非表示にするようにします。

続く4行目〜6行目がフェードインの指示。

"slow"の部分を書き換えるとフェードインの速度を変えることができます。

例えば$('body').delay(600).fadeIn(1000);とすると、1秒かけてフェードインすることになります。

数値はミリセカンド単位で、「1000」ならば1秒。「1200」ならば1.2秒。「3000」ならば3秒、と言った具合です。

同じく.delay(600)の「600」の箇所では、ページの読み込みが完了してから「0.6秒」ほど待って、それからフェードインをスタートさせる「遅延の処理」です。
気に入らなければ.delay(600)の部分を削除してしまっても構いません。

さて。できあがったファイル[fade.js]を、jQuery本体ファイルとともにHTMLの<head>〜</head>内で読み込みます。

<script src="jquery.js"></script>
<script src=".fade.js"></script>

これで準備はOK!

実際に動いているサンプルページを用意しましたので合わせてご覧ください。

jQuery Fade-In:サンプルページ

ここでは初心者向けに超簡単な仕様でコードを書きました。
スグに実装できますので、ぜひお試しください。

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Leave a Replyコメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です