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

今回は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>

今回はWEB制作のちょっとしたギミックとしてMac OS XのExposeのように、特定の要素だけを目立たせてその他はハイライト効果をあたえるプラグイン「jQuery Tools Expose」を紹介いたします。指定箇所以外の部分をハイライトさせる効果はLightboxなどで見慣れていますが、ページ内でも同様な効果をあたえる事ができるので使い方によっては面白い効果が期待できます。

❶ スクリプトをダウンロード
EXPOSEからtools.expose-1.0.5.js
jQUERYからjquery.js

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

<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="tools.expose-1.0.2.js" type="text/javascript"></script>

❸ Exposeの初期設定を行ないます。
「jQuery Tools Expose」プラグインを読み込んだスクリプトタグの下に以下の様なスクリプトタグを挿入して、Exposeの初期設定をいたします。
スクリプトはidが「expose」の要素にたいして効果を与えています。

<script type="text/javascript">
(function($){
	$(document).ready(function(){
		$("#expose").expose({
				color : "#000", //ハイライト時の背景色
				opacity : 0.7, //ハイライト時の背景の透明度
				loadSpeed : 1000, //ハイライトの表示速度
				closeSpeed: 600, //ハイライトの閉じる速度
				maskId : "exposeMask", //ハイライトのマスクのid
				api: true
		});
		
		$("#expose").hover(function(){
				$(this).expose().load();
		},function(){
				$(this).expose().close();
		});
	});
})(jQuery)
</script>

❹ ハイライトで表示されるマスクを設定します
3で、maskId : “exposeMask”と指定したIDはハイライトが実行された時に裏側に表示されるオーバーレイのidとなります。このidに対してマスク画像を背景としてCSSで設定します。背景にする画像は大きめの透過PNGのグラデーションがいいでしょう。
CSS内

#exposeMask{
	background:#000 url(../img/mask_gradient.png) no-repeat 50% 50%;
}