nicepaper @ ウィキ
nicepaper @ ウィキ

前回記事CSS3で画像をフェードインさせたりする。のことをjQueryで作ってみる。6月10日記事
イメージとしてはこんな感じです。
1（こんな感じから）

2（こんな感じになっていく。）




目次




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の方には、 何もないところからフェードインさせるので 

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% にすればできました。

「jQueryでWEBページ全体をフェードインさせる。」をウィキ内検索
最終更新：2015年06月10日 02:06
添付ファイル