- pixelfactory トップ
- HTML5特設サイト HTML5 Lab.
背景画像をアニメーションさせる
2011.07.08
jQueryを使って背景画像をアニメーションさせるJavaScriptを紹介します。
■JavaScriptの解説
function cloudInit(){
$(window).bind("resize",resize);
var winW;
var cw=$(".cloudWrap");
function resize(){
if(!$.support.noCloneEvent){
winW=document.body.clientWidth-16;
}else{
winW=window.innerWidth-16;
}
}
function init(){for(var i=0;i<cw.length;i++)movSet(cw,i)}
function start(){for(var i=0;i<cw.length;i++)cw[i].movStart()}
function movSet(jq,n){
var si,px=0,delay=60/(n+1);
jq[n].mov=function(){
px++;
if(px>673)px=px-673;
jq.eq(n).css("background-position",px+"px 0");
}
jq[n].movStart=function(){clearInterval(si);si=setInterval(h,delay)}
jq[n].movStop=function(){clearInterval(si)}
function h(){jq[n].mov()}
}
init();
resize();
start();
}
今回は雲の画像を使って右に流れていくアニメーションを作成します。
var cw=$(".cloudWrap");
この部分にアニメーションさせたい背景を配置するclass名を記述。
if(px>673)px=px-673;
ここには背景に使用する画像の幅を記述。
以上でJavaScriptの設定は完了です。
■設置方法
まずは<head>内に以下のコードを記述します。
<script type="text/javascript" src="common/js/jquery.js"></script>
<script type="text/javascript" src="common/js/bg_animation.js"></script>
<script type="text/javascript">
$(function(){
cloudInit();
});
</script>
■コードの記述
背景用のdivを用意し、JavaScript内に指定したclass名を付けます。
idは個別の背景画像用です。
<div class="cloudWrap" id="cloud1"></div> <div class="cloudWrap" id="cloud2"></div>
■CSSの記述
.cloudWrap{
position:absolute;
width: 100%;
height:278px;
overflow:hidden;
z-index: 1;
}
#cloud1{background: url(../img/cloud01.png) repeat-x;}
#cloud2{background: url(../img/cloud02.png) repeat-x;}
以上で設置完了になります。
今回は雲を動かしましたが、反対に陸地を動かしたり、
鳥や飛行機なんかを動かすのも面白いかもしれません。
- 背景画像をアニメーションさせる
（2011.07.08） - CSS3でのbox-shadowの指定方法
（2011.07.01） - HTML5で音源の再生と停止の方法
（2011.06.03） - HTML5で音源を流す方法
（2011.05.16） - HTML5で動画をブラウザによって読み込みを分ける方法
（2011.04.28） - HTML5で新しいフォーム属性を使う
（2011.04.21） - iPad向けオフラインコンテンツを作る
（2010.08.23） - HTML5 Lab. スタートします！
（2010.06.14）
