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

関連記事

  1. no-image

    JavaScript

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

    camera-sliderは多彩なエフェクトを備えた美しいスライドショ…

  2. JavaScript

    jQueryの基本的なセレクターを適当に試してみる

    自分の勉強用としてちょっと適当に試してみました。jQueryの基本のセ…

  3. curtains.js

    JavaScript

    カーテンがヒラヒラ動くようなテクスチャ面を実装できる「curtains.js」

    curtains.jsはカーテンがヒラヒラと波打つ動きのようなテクスチ…

  4. Image Gallery Threejs
  5. Text Rotator
  6. Letter Effects and Interaction Ideas

最近の記事

  1. ワンタッチ着脱フィルターキット
  2. Soundcore Ace A1
  3. cheero USB-C PD Charger 60W
  4. DY-S01

アーカイブ

PAGE TOP