前回記事CSS3で画像をフェードインさせたりする。のことをjQueryで作ってみる。6月10日記事
イメージとしてはこんな感じです。
1（こんな感じから）
2（こんな感じになっていく。）
目次
コードの<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の方には、 何もないところからフェードインさせるので
display:none;
と記述します。
背景画像をブラウザいっぱいに表示しているCSS記述方法をやってみる。
bodyに行ってみるもできなかった。
body_wrapperというIDを指定してみて行ってみるとできた。
{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>
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%;
/* 背景画像が読み込まれる前に表示される背景のカラー */
}
このようにすればできます。
width: 100%とheight: 100%
にすればできました。
