スポンサーサイト このエントリーを含むはてなブックマーク

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ページをふわぁっとエレガントに表示させるjQuery このエントリーを含むはてなブックマーク

jqueryロゴ
ページ遷移時、ページをふわっと表示させるjQueryを紹介します。

ページをエレガントに表示させるべし

所要時間:15分程度
設置難易度:★☆☆☆☆ (簡単)


jQueryの設置

参照サイト:jQuery fadeInを使ってAppleサイトのようなふわっと表示このエントリーを含むはてなブックマーク

jQuery本体
よくわかんねって人はとりあえず以下をテンプレートのhead-/head内にコピペ。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


フェード実行
head内に設置します。
<script type="text/javascript">
var i = 0;
var int = 0;
$(window).bind("load", function() {
$('#wrap').fadeIn(100); // フェードインの実行
var int=setInterval("sFade(i)",100); // ミリ秒ごとにフェードインの処理の実行
});
function sFade() {
if (i >= 1) {
clearInterval(int); // setIntervalの解除
}
i++;
}
</script>

#wrapにフェードさせたいクラスを。デフォルトでは#wrapです。
数字の100を変更させるとフェードインの速度を変更できます。

HTML
ページ全体をふわっとさせるのならbodyタグ直前直後で囲えばOKです
<body>
<div id="wrap">
...中略...
</div><!-- /wrap -->
</body>


CSS
#wrapをデフォルトで非表示にしておきます。
#wrap {
display: none;
}


フェードを使うとブログがちょっとエレガントになりますね。
簡単にできるので是非お試しください。
COMMENT
COMMENT FORM
  • URL:
  • comment:
  • password:
  • secret: 管理者にだけ表示を許可する
TRACK BACK
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。