スポンサーサイト

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

ブログ初心者に役立つwebページのフェードイン効果(jQuery)

qGbWS.jpg


ページ表示時のフェードイン効果を付けてみました。
どうでしょ?うまくフェードインしていますでしょうか...?

この効果はjQueryによるものですが、ブログ初心者でも簡単に実装できると思います。
1. まずは、jQuery本体をダウンロードしてください。→ダウンロード(jQuery)

2. ダウンロードしたファイルをアップロード。

3. htmlの<head>内に以下を記述。(jQueryの読み込み)

<script type="text/javascript" src="http://******/jquery.js"></script>



これで、jQueryが使えるようになります。(なるはずです....)



ページ表示時のフェードイン効果


htmlとcssの編集は以下のとおり。


script

<script type="text/javascript">
$(document).ready(function() {
$('#wrapper').fadeIn(4000);
});
</script>

*このスクリプトを<head>内に記述してください。
赤字の箇所は、フェードインの速度です。お好みに合わせて調整してください。


html

<div id="wrapper"></div>でフェードインさせたい要素(ページ全体)を囲みます。

↓↓こんな感じ↓↓

<div id="wrapper">
ここに<body>~</body>
</div>


css

#wrapper{
display: none;
}
関連記事
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。