PWS Tabs jQuery Plugin

JavaScript

多様なアニメーションが魅力のタブパネル「PWS Tabs jQuery Plugin」

PWS Tabs jQuery Pluginは多様なCSS3アニメーションが魅力の軽量タブパネルを実装することができるjQueryプラグインです。フラットなスタイルになっていてデザインもスッキリしているので色んなサイトに合いそうな感じです。

PWS Tabs jQuery Plugin

PWS Tabs jQuery Pluginを使った実際のデモは以下になります。

PWS Tabs jQuery Plugin

デモ

タブパネルが切り替わる際のエフェクトがたくさん用意されています。スケールエフェクトや上下左右いずれからのスライドといったものがあります。

また、タブの位置をhorizontal(上部か下部)やvertical(左か右)にすることも可能です。horizontalまたverticalはオプションのtabsPositionで指定することができます。

horizontalPositionでtopかbottomを、verticalPositionでleftかrightを決めれるようになっているので、タブを設置する位置に関してはとても自由度の高い内容になっています。

オプションは他にもいくつか設定できる項目が用意されているので、カスタマイズしたい場合には是非チェックしておきたいところですね。

個人的にタブパネルは切り替わる際にちょっとだけアニメーションがあった方が切り替わったかどうかを認識しやすいので、オプションで好きなエフェクトを設定できるのは嬉しいですね。

というわけで、色んなアニメーション機能を搭載したタブパネル「PWS Tabs jQuery Plugin」のご紹介でした。

PWS Tabs jQuery Plugin

関連記事

  1. Swipe-Li

    JavaScript

    スマホ操作に最適!左右のスワイプで有効・無効を選べるjQueryプラグイン「Swipe-Li」

    Swipe-LiというjQueryプラグインを使えば、左右のスワイプで…

  2. Macy.js

    JavaScript

    軽量なグリッドレイアウトを実装できるJSライブラリ「Macy.js」

    Macy.jsは軽量なグリッドレイアウトを実装することができる便利なJ…

  3. no-image

    JavaScript

    レスポンシブに対応したモーダルウィンドウのようなアラート実装「jquery.alert」

    jquery.alertはレスポンシブに対応したモーダルウィンドウ風の…

  4. no-image

    JavaScript

    シンプルでカスタマイズも簡単なパララックスエフェクト実装「parlx.js」

    parlx.jsはシンプルでカスタマイズも簡単なパララックスエフェクト…

  5. no-image

    JavaScript

    インスタの写真や動画を表示できる軽量なjQueryプラグイン「Instagram Lite」

    Instagram Liteは指定したユーザーのインスタグラムの写真や…

  6. EasyLoading

    JavaScript

    ローディングアニメーションを手軽に実装できる「EasyLoading」

    EasyLoadingは、ローディングアニメーションを手軽に実装するこ…

最近の記事

  1. ペーストしてスタイルを合わせる
  2. Hermèsオレンジスポーツバンド
  3. GoPro HERO8 Black

アーカイブ

PAGE TOP