TAGS :,

Webページを開いた際（ページロード時）に何か演出を加えられたらおもしろいかな、と
ふと思い立って作ってみた、ページロード時にカーテンが開くような演出を加えるスクリプト。
何かに使えそうな感じもしたので紹介してみます。

まず動作サンプルから。（画面内の「ページリロード」をクリックしてみてください。）

※サンプル画面上のページロード演出部分以外は、
先日のエントリー「jQueryで追尾型メニューリストを作ってみる」と同じものを使用しています。

≫別ウィンドウで見る場合はこちら

ページロードされると同時にカーテン要素となる＜div＞を左右に２つ生成し、
animateで幅と透明度を制御しているだけ。
HTMLソース内には特に特別な指定を加える必要はありません。

CSSでカーテン要素として生成する＜div＞に対して以下の指定を加えます。
※今回のサンプルではカーテン要素の左側を＜div id=”curtainLeft”＞、
右側を＜div id=”curtainRight”＞としています。

◆CSS
html,body {
	height: 100%;
}

#curtainLeft,
#curtainRight {
	top: 0;
	width: 50%;
	height: 100%;
	background: #000;
	position: absolute;
}
#curtainLeft { left: 0; z-index:100;}
#curtainRight { right: 0; z-index:101;}

カーテン部分を縦に画面目いっぱい表示するために
IE様用にhtmlとbodyにも『height:100%;』を入れてあげる必要があります。

そして肝心のSCRIPT部分は、以下のような感じに。

◆SCRIPT（jQuery）
$(window).load(function () {
	if(document.getElementById("curtainLeft") === null){
		$('body').prepend('＜div id="curtainLeft"＞＜/div＞');
	}
	if(document.getElementById("curtainRight") === null){
		$('body').prepend('＜div id="curtainRight"＞＜/div＞');
	}
	$("#curtainLeft").stop().animate({width:'0',opacity:'0'}, 2000 );
	$("#curtainRight").stop().animate({width:'0',opacity:'0'},2000 );
	setTimeout('Eliminate()',5000);
});
function Eliminate() {
	$('#curtainLeft').remove();
	$('#curtainRight').remove();
}

ページロード時に＜div id=”curtainLeft”＞と＜div id=”curtainRight”＞を生成して
animateで幅[width]と透明度[opacity]を変化させています。

生成したカーテン用の＜div＞要素はずっと残しておくのも気持ち悪いので、
ページロード後、5秒後に消す処理を加えています。

サンプルでは各＜div＞に背景色を敷いていますが、
これを画像にすることで違った見え方にすることも可能になります。

ページをロード（更新含む）する度に起こる演出なので、
あまり派手にすると返ってウザくなってしまう危険性もあるのでほどほどに。

半分は遊び間隔のSCRIPTですが何かの際に是非。。。