文字をフェードインで表示する
モジュールの読み込み方が分かったら、いよいよUIZE Frameworkを使ってみましょう。まずは文字をフェードインで表示する簡単なサンプルを作ります。フェードインで表示する文字は、HTMLのdiv要素を使って以下のように記述します。
<div id="ascText">ASCII.jp Web Professional</div>
UIZE Frameworkでのフェード処理は、Uize.Fxモジュールを使います。Uize.FxモジュールにはfadeStyle()メソッドが用意されており、引数を指定するだけで自動的にフェード処理ができます。Uize.Fx.fadeStyle()の引数は以下のとおりです。
Uize.Fx.fadeStyle(
エレメントのID名,
{ フェード開始時の引数 },
{ フェード終了時の引数 },
フェード時間
)
フェード開始時／終了時の引数は、スタイルシートのプロパティを指定します。不透明度はopacityプロパティで設定できますので、opacity :0 のように指定します。 opacityに指定する値は0〜1までの小数値で、0が完全な透明、1が不透明です。フェード時間はミリ秒で指定し、たとえば「2000」と指定すると2秒間かけてフェード処理をします。
サンプル2が実際のスクリプトです。ページが読み込まれると同時に、「ASCII.jp Web Professional」の文字がフェードインで表示されます。
ページが読み込まれると同時にASCII.jp Web Professionalの文字がフェードインする
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>文字のフェードイン</title>
<style type="text/css"><!--
#ascText {
width : 600px;
height : 100px;
color:#ff0000;
font-family: Palatino, Times;
font-size: 36px;
opacity: 0;
filter:alpha(opacity=0);
}
--></style>
<script type="text/javascript" src="js/Uize.js"></script>
</head>
<body>
<div id="ascText">ASCII.jp Web Professional</div>
<script type="text/javascript"><!--
Uize.module ({
required: 'Uize.Fx',
builder: function () {
Uize.Fx.fadeStyle ( 'ascText', // フェード処理するID名
{ opacity: 0 }, // フェード開始時の不透明度
{ opacity: 1 }, // フェード終了時の不透明度
2000); // フェード処理にかかる時間(msec)
}
});
// --></script>
</body>
</html>
