画像をリサイズしながらフェードインする
UIZE Frameworkは、テキストだけではなく画像のフェード処理も簡単にできます。画像の場合もテキストと基本は同じです。imgタグにID名を付けておき、Uize.Fx.fadeStyle()の最初の引数に指定するだけです（サンプル4）。
ページが読み込まれると同時に画像がフェードインする
<!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>
<script type="text/javascript" src="js/Uize.js"></script>
</head>
<body>
<img src="photo/asama.jpg" id="myImage" width="600" height="338" title="浅間山">
<script type="text/javascript"><!--
Uize.module ({
required: 'Uize.Fx',
builder: function () {
Uize.Fx.fadeStyle ( 'myImage', // フェード処理するID名
{ opacity: 0 }, // フェード開始時の不透明度
{ opacity: 1 }, // フェード終了時の不透明度
2000); // フェード処理にかかる時間(msec)
}
});
// --></script>
</body>
</html>
Uize.Fx.fadeStyle()のフェード開始時／終了時の引数には複数のプロパティを指定できます。たとえば、サンプル5のように記述すると、1×1ピクセルから600×338ピクセルまでサイズを変更しながら、徐々に透明から不透明に画像を変更します。
画像のサイズと不透明度が変化する
<!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>
<script type="text/javascript" src="js/Uize.js"></script>
</head>
<body>
<img src="photo/asama.jpg" id="myImage" width="1" height="1" title="浅間山">
<script type="text/javascript"><!--
Uize.module ({
required: 'Uize.Fx',
builder: function () {
Uize.Fx.fadeStyle ( 'myImage', // フェード処理するID名
{ opacity: 0, width : 1, height : 1 }, // フェード開始時の値
{ opacity: 1, width : 600, height : 338 }, // フェード終了時の値
2000); // フェード処理にかかる時間(msec)
}
});
// --></script>
</body>
</html>
◆
今回はここまでです。サンプルのパラメータを変更して、いろいろ試してみてください。次回はUIZE Frameworkの特殊ワイプ効果を使って、簡単なスライドショーを作成します。どうぞお楽しみに。
