背景画像にトランジション効果をつけられるJavaScript「BGTransition」

背景画像にも何らかの効果をつけられると、面白い表現が可能になりそうです。
BGTransitionは、そんな時手軽に導入が可能です。

sponsors

使用方法

BGTransitionからjquery.BgImageTransition.jsを、jQueryからjquery.jsをダウンロードします。

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.BgImageTransition.js"></script>
<script language="JavaScript" type="text/javascript">
$( function(){
    var bgImages = [ '切り替え画像1', '切り替え画像2', '切り替え画像3' ];
    var currImage = '最初の画像';
    setInterval( function(){
        do{
            var randImage = bgImages[Math.ceil(Math.random()*(bgImages.length-1))];
        }while( randImage == currImage )
        currImage = randImage;
        $('#id名').BgImageTransition( 'img/'+currImage ); //画像までのパス
    }, 3000) //移動速度
})
</script>
<style>
#id名2 {position:relative;}
#id名{
    position:absolute;
    background-repeat: no-repeat;
    margin-left:10px;
    height:590px; //背景画像の高さ
    width:800px; //背景画像の幅
    background-image: url(画像パス); //最初に表示する画像
}
</style>
上記を記述後、指定したid名を書き込めば完成です。

<div id="id名2">
	<div id="id名"></div>
</div>
※divでくくらなくても、表示可能ですが、position:absoluteでないとうまく効果が反映されません。
親要素にposition:relativeをふることを推奨します。

sponsors

Javascriptサンプルページ一覧
skuare.net

サンプル