responsive-flip-pricing-table

JavaScript

レスポンシブでフリップによる価格表示の切り替えができる「Responsive Flip Pricing Table」

レスポンシブに対応し、フリップによる価格表示の切り替えもできるテーブル「Responsive Flip Pricing Table」をご紹介します。月と年の価格をフリップアニメーションでスムーズに切り替えることが可能です。

Responsive Flip Pricing Table

Responsive Flip Pricing Table

デモ画面には、BASIC、EXCLUSIVE、PROの各価格が表示されており、その上には月と年を切り替えることができるスイッチボタンが設置されています。

MonthlyからYearlyに切り替えると、最初に表示された月額表示から年額表示にフリップで切り替わります。スムーズなフリップアニメーションで、手軽に月額と年額を確認できるのがいいですね。

定額サービスを運営しているWebページなどで活用できるのではないでしょうか?

また、レスポンシブにも対応していることから、PCはもちろんスマホでもレイアウトが最適化されるところもグッドです。

フリップによる価格表示の切り替えを実装したい人は、ぜひResponsive Flip Pricing Tableをチェックしてみてください。

関連記事

  1. Lobibox

    JavaScript

    レスポンシブなメッセージを通知できる「Lobibox」

    Lobiboxはレスポンシブなメッセージボックスを通知できるjQuer…

  2. Cube-jQuery-Slider

    JavaScript

    3Dキューブなスライダーを実装できる「Cube-jQuery-Slider」

    Cube-jQuery-Sliderは、3Dキューブなスライダーを実装…

  3. JavaScript

    レイアウトを超簡単に雑誌風に整列してくれるjQuery Masonryの使い方

    jQuery Masonryというプラグインを使えば、ものすごく簡単に…

  4. Vague.js

    JavaScript

    要素をぼかすことができるjQueryプラグイン「Vague.js」

    要素をぼかすことができるjQueryプラグイン「Vague.js」が面…

  5. PhotoJShop

    JavaScript

    写真にエフェクトやフィルタをかけることができるjQueryプラグイン「PhotoJShop」

    PhotoJShopというjQueryプラグインを使えば、写真にエフェ…

  6. hop

    JavaScript

    Webページ上の好きな場所をハイライトできる「hop」

    hopはオーバーレイされたWebページ上の好きな場所をハイライトするこ…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP