Wijmo UI for the Web
フリップアクション

FlipCard ウィジェットが前面から背面にフリップする方法は、animation オプションによって制御できます。アニメーションオプションとして、設定可能な多数の属性を使用できます。

disabled

デフォルト値は false であり、コードをいっさい追加せずにフリップアニメーションを実行できます。この属性を true に設定すると、アニメーション効果は使用されず、カードの反対面が単純に表示されます。

type

デフォルト値は「flip」です。この属性には、以下の任意の jQuery UI アニメーション効果を使用できます。詳細については、「アニメーション&」を参照してください。

  • scroll(スクロール)
  • blind(ブラインド)
  • bounce(バウンス)
  • clip(切り取り)
  • drop(落下)
  • explode(拡散)
  • fade(フェード)
  • fold(折りたたみ)
  • highlight(強調表示)
  • puff(膨張)
  • pulsate(鼓動)
  • scale(拡大縮小)
  • shake(振動)
  • size(サイズ変更)
  • slide(スライド)

duration

デフォルト値は 500 ミリ秒です。この属性を使用すると、フリップアクションの再生時間を変更できます。

direction

デフォルト値は「horizontal」であり、カードが横向きに裏返されます。「vertical」に設定すると、カードが下から上に向かって裏返されます。「カードの垂直変転」では、この属性による実際の動作を確認できます。

サンプル

次のサンプルスクリプトでは、再生時間を「2 秒」に、フリップの方向を「垂直方向」に、アクションの種類を「振動」に変更します。 

ウィジェットを初期化してアニメーションを変更するスクリプト
コードのコピー
<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#flipcard1").wijflipcard({ 
            animation: { 
                duration: 2000,
                direction: "vertical",
                type: "shake"
            }
        });
    });
</script>

関連トピック

参照

 

 


Copyright © GrapeCity inc. All rights reserved.