カードの垂直変転

「クイックスタート」の例を基に、animation オプションを使用して、カードを反転させる方法を変更できます。デフォルトでは、カードは水平方向に反転しますが、animation オプションの direction 属性を使用することで、垂直方向に反転するように変更できます。

アニメーションのその他の変更方法については、「フリップアクション」を参照してください。

HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを、以下のスクリプトに置き換えます。このスクリプトは、animation オプションの direction 属性を「vertical」に変更します。

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijflipcard"], function () { $(document).ready(function () { $("#flipcard1").wijflipcard({ animation: { direction: "vertical" } }); }); }); </script>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
require(["wijmo.wijflipcard"], function () {
    $(document).ready(function () {
        $("#flipcard1").wijflipcard({ 
            animation: { 
                direction: "vertical"
            } 
        });
    });
});
</script>

HTML ファイルの <body> セクションは、変更の必要はありません。このウィジェットの作成には、基本的な<div> タグで十分です。
HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のようになります。カードをクリックするとカードが垂直方向に反転し、再度クリックすると元の面に戻ります。

関連トピック

参照