Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

BackgroundPosition with jQuery

Nov242008
Vote:
http://bizcaz.com/archives/2008/11/24-220941.php
Categories: jQuery
Tags: jQuery
Social Bookmark

Prev Page: popEye with jQuery
Next Page: TreeView with jQuery

こんばんわ^^

だいぶ前( たしか夏ぐらい )にどっかでご紹介されてた jQuery のプラグインを試したもののすっかり忘れてて、その頃すっごく忙しかったので記事も中途半端に書きっぱなしで放置してたものがありまして、今さら感たっぷりな気持ちでいっぱいなのですが、一応記事もちゃんと書き直して公開しちゃいます (;￣∇￣A

Background-Position Animations プラグインを使ったスクリプトです。

サンプルを表示できませんでした。

こちらのプラグインは、作ったイメージのデザインによってまったく違った見え方になるのでおもしろいなっと思ったスクリプトです。
BackgroundPosition プラグインは以下のページから入手できます。

Background-Position Animations

上記サンプルは以下のサイトさんを元に作ったものです。

Using jQuery for Background Image Animations

使い方

使い方はカンタンです。マークアップは以下のようにシンプルです。

BackgroundPosition のマークアップ

<div class="box clear">
<ul id="bgp1">
<li><a href="#">●●●</a></li>
<li><a href="#">▲▲▲</a></li>
<li><a href="#">■■■</a></li>
</ul>
</div>

普通にリストにするだけです。
また、CSS も重要で配布元でご紹介してる必須な CSS は以下の通りです。

スタイルシート

ul {
list-style:none;
margin:0;
padding:0;
}
li {
float:left;
width:100px;
margin:0;
padding:0;
text-align:center;
}
li a {
display:block;
padding:5px 10px;
height:100%;
color:#FFF;/*各自の背景色に合わせる*/
text-decoration:none;
border-right:1px solid #FFF;/*各自の背景色に合わせる*/
}
li a {
background:url(bg.jpg) repeat 0 0;/*アニメーションさせる背景*/
}
li a:hover {
background-position:50px 0;
}

青字で分かるように float による回り込みを行ってます。ですので、最後は必ず clear による回り込み解除を行う必要がありますのでご注意ください。

上記サンプルのコードは以下の通りです。

BackgroundPosition コード

$(function(){
$('#a a')
.css( {backgroundPosition: "-20px 25px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(-20px 25px)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "-20px 25px"})
}})
})
$('#b a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -60px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(60px 0)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "0 0"})
}})
})
$('#c a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "0 0"})
}})
})
$('#d a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
});

青字が Top down( 上から下へ )のスクリプトになります。
赤字が Bottom up( 下から上へ )のスクリプトで、緑字が Right left( 右から左へ )のスクリプトです。
そして、黄字がフェード( 厳密には下から上へ )させたスクリプトになります。

基本的には mouseover でマウスオーバー時のアニメーション停止位置( イメージの表示位置 )を指定して、

マウスオーバー時のアニメーション

.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
})

mouseout でマウスアウト時のアニメーション停止位置( イメージの表示位置 )を指定するだけです。

マウスアウト時のアニメーション

.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(-20px 25px)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "-20px 25px"})
}})

duration はアニメーション速度を指定します。大きい値ほどゆっくり表示されます。

以上です。
この Background-Position Animations プラグインを使ったアニメーションは割りといろんなサイトさんでご紹介されてます。
背景イメージのデザインや、イメージのポジション( X 座標、Y 座標 )によっていろんな見せ方ができるので楽しいかもです。