このページの本文へ

JSで超ド派手なアニメが作れる「UIZE Framework」入門 (5/5)

2009年11月02日 11時00分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

画像をリサイズしながらフェードインする

 UIZE Frameworkは、テキストだけではなく画像のフェード処理も簡単にできます。画像の場合もテキストと基本は同じです。imgタグにID名を付けておき、Uize.Fx.fadeStyle()の最初の引数に指定するだけです(サンプル4)。

ページが読み込まれると同時に画像がフェードインする


●サンプル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ピクセルまでサイズを変更しながら、徐々に透明から不透明に画像を変更します。

画像のサイズと不透明度が変化する


●サンプル5


<!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の特殊ワイプ効果を使って、簡単なスライドショーを作成します。どうぞお楽しみに。

前へ 1 2 3 4 5 次へ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

Webディレクター江口明日香が行く