VerticalShift

JavaScript

要素を縦長に並べてマウスオーバーで全部表示させるjQueryプラグイン「VerticalShift」

とても面白い見せ方だったのでご紹介します。要素を縦長に並べてマウスオーバーで全部表示させるjQueryプラグイン「VerticalShift」です。画像やテキストといったボックス要素を綺麗に横に並べて表示させます。縦長の一部分だけが見えるようになっており、マウスを乗せることで全体を見せることができます。

[ads_center]

使い方

このようにマウスを乗せることで全部が表示されます。

VerticalShift

画像の場合のマークアップは以下のように記述します。

<div id="photos">
    <div><img src="images/sample1.jpg" width="200px" height="200px" /></div>
    <div><img src="images/sample2.jpg" width="200px" height="200px" /></div>
    <div><img src="images/sample3.jpg" width="200px" height="200px" /></div>
</div>

で、VerticalShiftをセットします。jQuery本体は読み込んでいるのが前提です。

$("#photos > div").verticalShift({options});

シンプルでとても使いやすいですね。スペースも有効活用できそうなので、見せ方の一つとして覚えておきたいjQueryプラグインです。

ダウンロードや詳細については以下からどうぞ。

関連記事

  1. Kerning.js

    JavaScript

    文字間のカーニングや一部の色を変えたりできるjQueryプラグイン「Kerning.js」

    文字間のカーニングや一部の文字の色を変えたりできるjQueryプラグイ…

  2. gridslide.js

    JavaScript

    いろんな方向に画像をスライドできるjQueryイメージスライダー「gridslide.js」

    gridslide.jsはいろんな方向に画像をスライドさせることができ…

  3. jsPanel

    JavaScript

    高度なセッティングができるフローティングパネルやモーダルウィンドウ実装「jsPanel」

    jsPanelは高度なセッティングができるフローティングパネル、モーダ…

  4. Touch-Tabs-jQuery

    JavaScript

    イベントやカスタマイズが可能な拡張性の高いタブシステム「Touch-Tabs-jQuery」

    Touch-Tabs-jQueryは、イベント設定やカスタマイズが可能…

  5. MenuSpy

    JavaScript

    セクションビュー対応のナビゲーションメニュー実装「MenuSpy」

    MenuSpyは、ナビゲーションメニューを作成するためのjsライブラリ…

  6. Radial SVG Slider

    JavaScript

    放射状に切り替わるスライダーを実装できる「Radial SVG Slider」

    Radial SVG Sliderは、放射状に広がりながら切り替わるス…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. M360bt
  2. BQ-CASE/1
  3. GLOO BOX

アーカイブ

PAGE TOP