Pushbar.js

JavaScript

スライドでコンテンツを引き出せる「Pushbar.js」

Pushbar.jsはスライドでコンテンツやナビゲーションメニューを引き出すことができるJavaScriptプラグインです。上下左右に引き出しを配置できるほか、オプションを利用することで引き出されたコンテンツ表示中にメインコンテンツ部分をボカシたりオーバーレイをかけたりすることも可能です。

4方向から指定可能

デモ

デモでは、上下左右の4方向から各コンテンツを引き出して表示させるボタンが設置されています。例えば、LEFT PUSHBARというボタンをクリックすると、左側からナビゲーションメニューがスライド式で表示されます。同じように、RIGHT PUSHBARは右から、TOP PUSHBARは上から、BOTTOM PUSHBARは下からスライドアニメーションで引き出されます。

特定のコンテンツを通常時は隠しておき、必要に応じてユーザーが任意でそのコンテンツを引き出せるといった機能を実装したい人にはピッタリのJSプラグインですね。

また、オプションにはblurとoverlayが用意されていて、デフォルトではblurがfalse、overlayがtrueに設定されています。どちらもメインコンテンツに加える効果で、blurはボカシ、overlayは暗めのオーバーレイがかかります。これらが加わることで引き出し中のコンテンツに目が向くので、引き出したコンテンツをより注目させたい場合に最適です。

コンテンツを引き出す方向はHTMLタグに付与するクラスで指定することができます。例えば、左から引き出したい場合は「pushbar」の他に「from_left」というクラスを付けてあげます。

Pushbar.js

no-image多彩なエフェクトを備えたjQueryスライダープラグイン「camera-slider」前のページ

軽量なスティッキー要素を実装できるjQueryプラグイン「Zebra Pin」次のページno-image

関連記事

  1. Enllax.js

    JavaScript

    軽量で簡単なパララックスを実装できるjQueryプラグイン「Enllax.js」

    Enllax.jsは軽量で使い方も簡単なパララックスエフェクトを実装す…

  2. JavaScript

    レスポンシブにも対応している人気のjQueryプラグインのスライダー「Nivo Slider」の使い…

    レスポンシブにも対応している人気のjQueryプラグイン「Nivo S…

  3. JavaScript

    リスト化した要素を自分が指定した数に分割できるjQueryプラグイン「Easy List Split…

    リスト化した要素を自分が指定した数に分割できるシンプルだけど便利なjQ…

  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでオブジェクトの型を取得して判定などをしたい場合はjQuery.type()を使う

    jQuery.type(obj)を使えばオブジェクトの型を知ることがで…

  5. ScrollBooster

    JavaScript

    ドラッグしながらスクロールするライブラリ「ScrollBooster」

    ScrollBoosterはドラッグしながらスクロールする機能を実装で…

  6. Pagination.js

    JavaScript

    シンプルでさまざまなカスタマイズが可能な「Pagination.js」

    Pagination.jsはシンプルでさまざまなカスタマイズが可能なペ…

最近の記事

  1. 椿屋特製アイス珈琲
  2. 有栖川公園
  3. グーディオ オーガニックチョコレート(ミント)
  4. チキンバターマサラとシュリンプバターマサラ
  5. 恵比寿のダ・ミケーレのピザ

アーカイブ

PAGE TOP