jQueryで要素を動かして印象的にする:via Crafting an Animated Postcard With jQuery

昨今Tori's Eyeのように要素をJavaScriptで動かしているサイトを多くみます。
今回はjQueryを使用して要素を動かす方法を紹介します。
via:Crafting an Animated Postcard With jQuery
jQueryで要素を動かして印象的にする:via Crafting an Animated Postcard With jQueryサンプル

使用方法
サンプルのようなアニメーションを作るには以下のようなhtmlを記述します。
使用するファイル一式はCrafting an Animated Postcard With jQueryからダウンロードしてください。
<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; }

これでイメージ的には下記のようになります。
※実際には黒い部分は見えません。

次にJavaScriptを書きます。
jQueryからjquery.jsをjQuery Easing Pluginからjquery.easing.1.3.jsをダウンロードします。
まずは以下を記述します。
<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も作れるようになります。

jQueryで要素を動かして印象的にする:via Crafting an Animated Postcard With jQueryサンプル

sponsors

「jQueryで要素を動かして印象的にする:via Crafting an Animated Postcard With jQuery」をシェアする

記事作成:
記事URL:

TOP > > > jQueryで要素を動かして印象的にする:via Crafting an Animated Postcard With jQuery