古籏一浩のJavaScriptラボ ― 第18回
JSで超ド派手なアニメが作れる「UIZE Framework」入門
2009年11月02日 11時00分更新
画像をリサイズしながらフェードインする
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の特殊ワイプ効果を使って、簡単なスライドショーを作成します。どうぞお楽しみに。
この連載の記事
- 第53回 Mac用ウィジェットをHTML/CSSで自作
- 第52回 Web技術で作るDashboardウィジェット開発入門
- 第51回 iOS 4.2×localStorageで作るGPSレコーダー
- 第50回 HTML5 SVGで作るシューティングゲーム
- 第49回 HTML5のInline SVGをJavaScriptで操作
- 第48回 HTML5で注目！インラインSVGの使い方
- 第47回 iOS 4.2の新機能で作るHTML5+JSアプリ
- 第46回 JavaScriptでEPUBビューアーを自作してみた
- 第45回 Audio Data APIでブラウザーをシーケンサーに！
- 第44回 Firefoxでソフトシンセも作れるAudio Data APIの使い方
- この連載の一覧へ
