• Home
  • twitter
  • Facebook Page
  • google+
  • RSS
  • follow us in feedlyfeedly
  • Contact Form
OPEN
2013/03/11

jQueryを使ってページの読み込み時に画像などの要素をフェードインさせる

365.18 1 chapter down, 2 books to go
365.18 1 chapter down, 2 books to go / remysharp

先日当サイトの404ページを作成したのですが、その折になんとなく画像などをフェードインさせる仕様にしてみました。
当サイト404ページ

そんなに難しいコードでもないんですけど、どうやってやるんですか的なご質問を頂きましたのでここでやり方をご紹介。


コードなど

まずはheadタグ内にjQueryを設置しませう。
説明は以前書いた7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座をごらんくだしあ。

サンプルとして以下のhtmlを用意しました。

	<div id="main">
		<div class="hoge"></div>
		<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</div>

↑このページにあるクラス「hoge」内のimgをフェードインさせるには、headタグ内もしくは読み込みのスクリプトファイルに以下を記述。

// ↓.hoge内のimgを隠す
$(function(){
	$(".hoge img").css("display","none");
});

//↓windowがロードされたらimgをフェードインさせる
$(window).bind("load",function(){
	$(".hoge img").fadeIn(1000);
});

fadeIn(1000)の数値を変化させればフェードインまでにかける時間を変更可能です。(1000s=1秒)

フェードインデモページ

bodyタグ全体をフェードインさせれば昔のApple webページみたいな感じで表示できますが、まぁ重くなりそうなんでやりません。実装するのなら適宜要素を区切ってやってみてください。
注意点としては、特定の要素をフェードインさせる場合、その外側に高さが設定されたブロック要素が無いと、フェードインの際にその下にある要素が下がってしまうのでカッコ悪いってことです。
(上の例で言うと.hoge自体にフェードインをかけた場合)

お試しアレ:)

こんな記事もオススメです

7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座

[Web初心者のための備忘録]煩雑なソースコードを避けるためにJavaScriptを外部ファイルから読み込む

SPONSORED LINK

FB Comments

About This Site

Mac,iPhone,Evernote,Web,Foodを中心に様々な情報をお届けするブログです。
ふざけた文体が目につきますが、本人はいたってふざけております。
ご意見・ご感想は info[at]ozpa-h4.com もしくはコンタクトフォームまでどうぞ。
広告掲載、執筆、取材などの依頼も受け付けております。
さらに詳しく

SNS

×