DD_log / HTML,CSS,Javascript,Wordpressの解説や雑感サイト

今回はjQueryを使ってWebサイトの全体、または一部の要素をフェードインさせるアニメーションを紹介します。

要素に対するID名でアニメーションの指定が行えるため、比較的自由度が高い設定が行えると思います。

下記にまずはHTMLの記述から解説をします。

HTMLの記述(任意ですが例として下記の内容を記述します)

<div id="box">
 <p>ここが#boxのエリア</p>
</div>
<div id="box2">
 <p>ここが#box2のエリア</p>
</div>

CSSの記述(これも任意ですが例として下記の内容を記述します)

*{

margin:0;
 padding:0;}

body{
 background-color:#000;}

#box{
 background-color:#000;
 border:10px #F0F solid;
 color:#fff;
 text-align:center;
 width:300px;
 height:300px;
 line-height:300px}

#box2{
 background-color:#000;
 border:10px #0FF solid;
 color:#fff;
 text-align:center;
 width:300px;
 height:300px;
 position:absolute;
 top:150px; left:150px;
 line-height:300px}

Javascriptの記述

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script type="text/javascript">
$(function() {
 $(function(){
 //#boxを隠す
 $("#box").css("display","none");
 //#boxを隠す
 $("#box2").css("display","none");
 });
 //windowがロードされたらフェードインさせる
 $(window).bind("load",function(){
 $("#box").fadeIn(2000);
 $("#box2").fadeIn(5000);
 });
});
</script>

8行目と10行目で指定したい要素のID名を呼び出し、CSSのdisplayの値をnoneとすることで非表示にします。

その後14行目と15行目で、ウィンドウが読み込まれたらフェードインするというアニメーションの指定を行います。

括弧内の値はアニメーションの速度になります。値が大きいほどゆっくりとアニメーションをします。

単一の要素のみに指定をすることもできれば、上記の表記のように複数の要素に指定をすることもできます。

この記述でWebサイトが読み込まれると二つの要素が時間差でアニメーションを行うと思います。

比較的簡単な記述で指定できるので使い勝手もよいかと思います。