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プラグインです。

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

KGallery縦や横に配置されたサムネイルから画像を選択できるjQueryの画像ギャラリー「KGallery」前のページ

Lightroomで画像にフラグをつけて振り分けるやり方次のページLightroomのフラグについて

関連記事

  1. PhotoJShop

    JavaScript

    写真にエフェクトやフィルタをかけることができるjQueryプラグイン「PhotoJShop」

    PhotoJShopというjQueryプラグインを使えば、写真にエフェ…

  2. Easy Responsive Tabs to Accordion

    JavaScript

    レスポンシブ対応のタブとアコーディオンで切り替わるjQueryプラグイン「Easy Responsi…

    今すぐにでも使いたいjQueryプラグインを見つけたので備忘録。レスポ…

  3. PrognRoll

    JavaScript

    スクロールによるプログレスバーを表示できるjQueryプラグイン「PrognRoll」

    PrognRollはスクロールによるプログレスバーを表示することができ…

  4. no-image

    JavaScript

    指定したテキストをハイライトとタイピング効果で表示できる「typeLighter.js」

    typeLighter.jsは、指定したテキストをハイライトとタイピン…

  5. multi-list

    JavaScript

    複数の選択可能なリストにするためのjQueryプラグイン「multi-list」

    multi-listは、順序付けされていないリストを複数の選択可能なリ…

  6. JS Form Validator

    JavaScript

    HTMLフォームの検証を簡単に実装できる「JS Form Validator」

    JS Form ValidatorはHTMLフォームの検証を簡単に実装…

コメント

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

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

最近の記事

  1. 田沢湖
  2. ゴムの耳栓
  3. ライオンコーヒー(バニラマカダミア)
PAGE TOP