「jQueryでWEBページ全体をフェードインさせる。」の編集履歴（バックアップ）一覧に戻る
前回記事[[CSS3で画像をフェードインさせたりする。]]のことをjQueryで作ってみる。6月10日記事
~
~
目次
#contents
~
~
----
~
*jQueryの読み込み
コードの<head></head>タグ内に
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
を記述。googleのCDN使いましょう。
*サンプルとして、まずは作ってみる
HTML部
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('body').fadeIn(4000);
});
</script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>jQueryでフェードイン</title>
</head>
<body>
<p>文字</p>
<p><img src="flower.png" alt="花"></p>
</body>
</html>
CSS部
body{
display:none;
background: #EEEEEE;
}
コードの意味
<script>
$(document).ready(function() {
$('body').fadeIn(4000);
});
</script>
jQueryに命令。bodyに対してフェードイン4000ミリセカンドを設定します。
また、CSSの方には、&color(red){何もないところからフェードインさせるので}
display:none;
と記述します。
*色々と試してみる
**ページ全体
[[背景画像をブラウザいっぱいに表示しているCSS記述方法]]をやってみる。
bodyに行ってみるもできなかった。
body_wrapperというIDを指定してみて行ってみるとできた。
~
&u(){HTML部
}head部分に以下を記述します。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#body_wrapper').fadeIn(4000);
});
</script>
&u(){CSS部}
#body_wrapper {
display:none;
width: 100%;
height: 100%;
/* 画像ファイルの指定 */
background: url(images/resize2.jpg);
/* 画像を常に天地左右の中央に配置 */
background-position: center middle;
/* 画像をタイル状に繰り返し表示しない */
background-repeat: no-repeat;
/* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
background-attachment: fixed;
/* 表示するコンテナの大きさに基づいて、背景画像を調整 */
background-size: 100% 100%;
/* 背景画像が読み込まれる前に表示される背景のカラー */
}
このようにすればできます。~
&color(red){width: 100%とheight: 100%}にすればできました。
