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

背景画像にも何らかの効果をつけられると、面白い表現が可能になりそうです。
BGTransitionは、そんな時手軽に導入が可能です。
背景画像にトランジション効果をつけられるJavaScript「BGTransition」サンプル

使用方法
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をふることを推奨します。
背景画像にトランジション効果をつけられるJavaScript「BGTransition」サンプル

sponsors

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

記事作成:
記事URL:

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