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をチェックしてみてください。

jQuery Magnifyシンプルで軽量なズーム機能を実装できる「jQuery Magnify」前のページ

HTML要素をページ上部に固定させれるjQueryプラグイン「sticky-items」次のページsticky-items

関連記事

  1. P-Loading

    JavaScript

    パワフルなローディングマスクを実装できるjQueryプラグイン「P-Loading」

    P-Loadingは、パワフルなローディングマスクを手軽に実装すること…

  2. Changing Background Color while scrolling
  3. VintageTxt

    JavaScript

    タイピングしているような効果を実装できるjQueryプラグイン「VintageTxt」

    VintageTxtというjQueryプラグインを使えば、文字をタイピ…

  4. no-image

    JavaScript

    フロントエンドアプリケーションを構築するためのJSライブラリ「HyperApp」

    HyperAppは、フロントエンドアプリケーションを構築するための1K…

  5. Inspiration for Letter Effects

    JavaScript

    印象的なテキストエフェクトを実装する「Inspiration for Letter Effects」…

    anime.jsを活用した、印象的でとってもかっこいいテキストエフェク…

  6. no-image

    JavaScript

    フレキシブルでモバイルフレンドリーなフォトギャラリー実装「jGallery」

    jGalleryは、フレキシブルでモバイルフレンドリーなフォトギャラリ…

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP