jQueryで写真を下から上まで自動で舐め回すスクリプトを作った

ビルの写真を下から上まで動かしながら見せたい、、という要望があったので作りました。

サンプルページ

HTML

<div id="move-img"></div>

CSS

#move-img {
	width: 100%;
	height: 370px;
	overflow: hidden;
	margin: 60px auto;
	position: relative;
	background: transparent repeat-y;
	background-position-x: center;
	background-image: url(images/company.jpg);
	background-size: cover;
}

スクリプト

$(document).ready(function(){
  var Speed = 0.08;  //動かすスピード
  var imgHeight = 1000;
  var posY = 370;  //見せる枠の高さによって変動
  setInterval(function(){
    if (posY >= imgHeight){
      posY= 370;  //見せる枠の高さによって変動
    }
    posY += Speed;
    $('#move-img').css('background-position-y', parseInt(posY) + 'px');
  }, 1);
});

Speedで指定した数字を、背景画像のposition-yに足していくことによって、表示位置を変えています。
imgHeightで指定した画像の高さまできたら、画像の一番下に戻るようになっています。たぶん。