ページ表示の際にイントロエフェクトを入れてくれる「IntroTzikas」

一昔前にオールフラッシュサイトにおいて、ページを開いた際に横から線が伸びてきて、読み込み完了の割合を表現するというビジュアルが良く見られましたが、そのようなイントロ画面をjQueryで再現することができる「IntroTzikas」をご紹介します。

DEMO

1.「introtzikas.js」をダウンロード

「IntroTzikas」より「introtzikas.js」をダウンロードします。

IntroTzikas

2.HTMLを記述

サンプル用に「START」というテキストを表示するHTMLを記述しています。

<div id="message">START</div>

1	<div id="message">START</div>

3.CSSを記述

サンプル用「START」という文字をセンターに配置するためのcssを記述しました。
適宜、書き換えてください。

#message {
	width: 80%;
	margin: 20% auto;
	font-size: 100px;
	font-weight:bold
	text-align:center;
}

#message {

width: 80%;

margin: 20% auto;

font-size: 100px;

font-weight:bold

text-align:center;

}

4.「introtzikas.js」とjQuery本体を読み込む

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/introtzikas.js"></script>

1 2	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript" src="js/introtzikas.js"></script>

5.JavaScriptを記述

いくつかオプション設定が可能になっています。

<script type="text/javascript">
	$(document).ready(function() {
		  $().introtzikas({
		   line: 'white', 
		   speedwidth: 1000, 
		   speedheight: 1000, 
		   bg: '#1f3c38',
		   lineheight: 2
		});
	});
</script>

$(document).ready(function() {

$().introtzikas({

line: 'white',

speedwidth: 1000,

speedheight: 1000,

bg: '#1f3c38',

lineheight: 2

});

</script>

▼オプション設定

line	左から伸びてくる線の色を指定
speedwidth	線の左から右へのスピードを1000ミリ秒単位で指定
speedheight	線の上下の広がりのスピードを1000ミリ単位で指定
bg	背景色
lineheight	線の高さ幅をpx指定

以上になります。