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

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

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

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

ページロードされると同時にカーテン要素となる<div>を左右に2つ生成し、
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ですが何かの際に是非。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (2)

  • クララ | 2014.02.13 19:22

    初めてjQueryを使ってみました。
    背景に画像を置いて、感動して何十回もF5キーを押してしまいました。
    色々試してみます。
    判り易く書いてくださってありがとうございます。

  • BlackFlag | 2014.02.16 10:45

    >クララさん
    コメントありがとうございます。
    当記事のアニメーションスクリプトがお役に立ったようで
    嬉しく思っております。

    当ブログでは他にも色々とjQueryを使っての演出方法など
    紹介させていただいておりますので
    あれこれお試しいただけると幸いです。

    よろしくお願いします。







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryでページロード時にカーテンが開くような効果をつけてみる

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR