このページの本文へ

JS超えた!? UIZE Frameworkの特殊効果を見せます! (5/5)

2009年11月13日 14時00分更新

文●古籏一浩

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

好みのエフェクトに仕上げよう

 最後に、特殊ワイプ効果の細かいパラメーターを設定してみましょう。パラメーターは、2ページ目で紹介したとおり、UIZE Frameworkのデモページで確認できます。パラメーター名はプロパティ名に対応しており、set()を使って指定します。指定できるプロパティ名は以下のとおりです。

allToFull 割合(座標計算処理)
alignX 横の開始位置~終了位置や動きをまとめて設定
alignY 縦の開始位置~終了位置や動きをまとめて設定
dissolve 不透明度変化も同時に行うかどうかのフラグ
divisionX 横の分割数
divisionY 縦の分割数
duration 処理にかかる秒数(ミリ秒)
firstPaneSizeX 最初の横サイズ
firstPaneSizeY 最初の縦サイズ
paneSeedSizeX 横サイズ(シード:初期値)
paneSeedSizeY 縦サイズ(シード:初期値)
paneSeedContext コンテキスト
paneProgressDelay ディレイ
paneOrderScheme 表示処理方法

 すべて設定する必要はありません。たとえばワイプにかかる時間を8秒に設定したい場合はimageWipe.set({ duration : 8000 });とするだけです。複数のパラメーターを一括して指定する場合は以下のように記述します。


imageWipe.set({
                duration : 6000,
                allToFull : 20,
                divisionsX : 4,
                divisionsY : 4,
                paneSeedSizeX : 40,
                paneSeedSizeY : 20
});


設定した特殊ワイプとパラメーターによって画像が切り替わる

●サンプル3


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>ImageWipeサンプル3</title>
        <link rel="stylesheet" href="css/page.content.css"/>
    </head>
    <body>
        <script type="text/javascript" src="js/Uize.js"></script>
        <div id="page_imageWipe" style="position:relative; width:600px; height:338px; border:1px solid #555;"></div>
        <script type="text/javascript"><!--
            photoNo = 0;
            photos = ['photo/1.jpg', 'photo/2.jpg', 'photo/3.jpg'];
            Uize.module ({
                required:[
                    'Uize.Widget.Page',
                    'Uize.Widget.ImageWipe.xPresets'
                ],
                builder:function () {
                        var page = window.page = new Uize.Widget.Page();
                        imageWipe = page.addChild ('imageWipe',Uize.Widget.ImageWipe,{built:false});
                        page.wireUi();
                        imageWipe.set(Uize.Widget.ImageWipe.presets.facetedFade);
                        imageWipe.set({
                                        duration : 6000,
                                        allToFull : 20,
                                        divisionsX : 4,
                                        divisionsY : 4,
                                        paneSeedSizeX : 40,
                                        paneSeedSizeY : 20
                        });
                        performWipe();
                        setInterval('performWipe()', 4000);
                }
            });
            function performWipe () {
                imageWipe.set({src : photos[photoNo]});
                photoNo = (photoNo + 1) % photos.length;
            }
        // --></script>
    </body>
</html>


 以上で今回のサンプルは完成です。自分で撮影した写真画像やCGなど、UIZE Frameworkの特殊ワイプを使って表示すればまったく違った雰囲気を楽しめます。ぜひ、エフェクトの種類や設定を変更して使ってみてください。

前へ 1 2 3 4 5 次へ

この連載の記事

一覧へ

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

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