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. HCaptions

    JavaScript

    ホバー時に色々なエフェクトでキャプションをオーバーレイ表示できるjQueryプラグイン「HCapti…

    指定した要素をホバーすると色々なエフェクトでキャプションをオーバーレイ…

  2. iziToast

    JavaScript

    エレガントでレスポンシブに対応したトーストを実装できる「iziToast」

    iziToastは、エレガントでレスポンシブに対応した軽量のトーストを…

  3. EasyLoading

    JavaScript

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

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

  4. Textualizer

    JavaScript

    テキストに様々なエフェクトを与えながら切り替わっていくjQueryプラグイン「Textualizer…

    フェードやスライドといった様々なエフェクトをテキストに与えながら切り替…

  5. vDrop

    JavaScript

    選択ボックスの選択肢をドロップダウンリストで表示できる「vDrop」

    vDroppは、選択ボックスの選択肢をドロップダウンリストで表示してく…

  6. Warp drive jQuery plugin

コメント

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

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

最近の記事

  1. SV-S251
  2. スラウェシ トラジャ
  3. 梅
  4. CAR-HLD12BK

アーカイブ

PAGE TOP