







sponsors
<div id="content"> <div id="sun"><img src="images/sun.gif"/></div> <div id="cloud1"><img src="images/cloud1.png"></div> <div id="cloud2"><img src="images/cloud2.png"></div> <div id="cloud3"><img src="images/cloud3.png"></div> <div id="raft"><img src="images/raft.png"></div> <div id="raftripple"><img src="images/raftripple.gif"></div> <div id="greetings"><img src="images/greetings.png"></div> <div id="stamp"><img src="images/stamp.png"></div> </div>次にCSSを記述します。
//枠部分です。 //position:relativeかつoverflow:hiddenを必ず指定してください。 #content{ position:relative; width:700px; height:300px; overflow:hidden; border:5px solid #f5f5f5; background: url('images/scene_bg.jpg'); } #sun{ position:absolute; top:10px; left:30px; } //雲が隠れるようネガティブマージンを指定します。 //z-indexはどの雲を上に出した以下で調整します。 #cloud1{ position:absolute; top:60px; left: -150px; z-index:5; } #cloud2{ position:absolute; top:40px; left: -250px; z-index:4; } #cloud3{ position:absolute; top:25px; left: -100px; z-index:3; } //浮き輪が波の上にくるようにz-indexを指定します。 #raft{ position:absolute; top:220px; left: 312px; z-index:20; } #raftripple{ position:absolute; top:220px; left: 309px; z-index:19; } //テキストをスタンプは雲と同様隠れるようにネガティブマージンを指定します。 #greetings{ position:absolute; top:-51px; left: 200px; z-index:21; } #stamp{ position:absolute; top:5px; left: 801px; z-index: 21; }これでイメージ的には下記のようになります。
<script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script>
function animate_element(){ $("#element").animate({left:"+=100px"},1000) //elementを相対的に左100pxまで1000ミリ秒かけて移動 .animate({left:"-=100px"}, 1000) //elementを相対的に左から-100pxまで1000ミリ秒かけて移動 setTimeout("element()",2000); //2000ミリ秒後に動作を繰り返します。 }上記のテンプレートを今回のアニメーションに適用してみます。
function sun_raft(){ $("#sun").animate({opacity:".7"},1000).animate({opacity:"1"},1000); //#sun(太陽)のopacity(透過濃度)に変化を与える $("#raft").animate({top:"-=5px"},1000).animate({top:"+=5px"}, 1000); //#raft(浮き輪)の位置を-5pxに1000ミリ秒で移動させ、その後+5pxに1000ミリ秒で移動 $("#raftripple").animate({opacity:".1"},1000).animate({opacity:"1"},1000); setTimeout("sun_raft()",2000); } //#raftripple(浮き輪の波)のopacity(透過濃度)に変化を与える function cloud1(){ $("#cloud1").animate({left:"+=850px"},10000).animate({left:"-150px"}, 0) //#cloud1(雲1)を850pxに10000ミリ秒かけ移動し、その後0秒で-150pxに移動。 setTimeout("cloud1()",10000); //setTimeoutでループ } function cloud2(){ $("#cloud2").animate({left:"+=950px"},9000).animate({left:"-250px"}, 0) setTimeout("cloud2()",9000); } function cloud3(){ $("#cloud3").animate({left:"+=800px"},6000).animate({left:"-100px"}, 0) setTimeout("cloud3()",6000); }functionをまとめます。
function animation(){ sun_raft(); cloud1(); cloud2(); cloud3(); }さらに一回切りかつeasingプラグインを使ったアニメーションを加えます。
$("#greetings").animate({top: '125px' }, //#greetingsを125pxまで移動させます。 {queue:false, duration:600, //600ミリ秒後にアニメーションを開始 easing:'easeOutBounce' //easingプラグインのエフェクトです } ); $("#stamp").animate({left: '595px' }, {queue:false, duration:1200, easing:'easeOutBounce'} );※jQuery Easing Pluginでエフェクトをいろいろ見ることができます。
$(document).ready(function() { setTimeout("animation()",300); //いきなり動かないように300ミリ秒後にanimationを開始させます });この手順がわかるとAnimated Landscape Header with jQueryも作れるようになります。
sponsors