▲背景（空の部分）だけを縦方向にスクロールさせます。

今回はWEB制作のちょっとしたギミックとして背景画像を自動でスクロールさせて、ちょっとした遊び心を持たせたビジュアル効果をご紹介します。私のデザインでも、トップページに大きめの画像を取り入れる事がよくあります。静止画や平凡なスライドショーでもいいのですが、インパクトにかけることもあります。そんな時にちょっと手を加えるだけでシンプルなデザインの中に臨場感を与える事ができます。

❶ スクリプトをダウンロード
jQuery Pluginsからjquery.backgroundPosition.js
jQUERYからjquery-1.4.1.min.js

❷ スクリプトを読み込みます。

<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="jquery.backgroundPosition.js" type="text/javascript"></script>

❸ スクロールさせる背景画像を準備します。
スクロールさせる背景画像を用意します。ここでは縦方向のスクロールを無限ループさせるという設定を行なうため、高さを1000ピクセルとします。

❹ 設定を行ないます。
挿入したスクリプトタグの下に以下の様なスクリプトタグを挿入して、スクロール部分の設定をいたします。「bgimageHeight」という変数に背景画像の高さの数値を指定します。ここでは1000ピクセルとなっています。その高さ分を縦方向にスクロールすることになります。スクロール速度は「10000」の部分を変更します。「一秒＝1000」が目安となります。

<script type="text/javascript">
$(function() {
var bgimageHeight = 1000 - $('div#header').css("height").replace(/px/,"");

   	function scrollbackground() {
		$('div#header').css(
			{backgroundPosition: "50% 0"}
		);
		$('div#header').animate(
		{backgroundPosition: '(50% -' + bgimageHeight + 'px)'},
		10000,		//アニメーションが完了するまでの時間(msec)
		"linear",	//easing アニメーションの加速度
		function () {
		scrollbackground();	//スクロールを繰り返す
			}
		);
	};

	scrollbackground();
});
</script>