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

    JavaScript

    モバイル用のリフレッシュインジケーターを実装できる「ptrLight」

    ptrLightはモバイル用のリフレッシュインジケーターを実装すること…

  2. no-image

    JavaScript

    背景にスクロールエフェクトを実装する「Physics-Based Background Scroll…

    背景に美しいスクロールエフェクトを実装する「Physics-Based…

  3. Dependent Dropdown

    JavaScript

    ネストされたセレクトボックスを実装できる「Dependent Dropdown」

    Dependent Dropdownはネストされたセレクトボックスを実…

  4. FitText

    JavaScript

    テキストサイズをブラウザ幅の大きさに自動で合わせてくれるjQueryプラグイン「FitText」

    可変するブラウザ幅にテキストサイズを自動で合わせてくれるjQueryプ…

  5. JavaScript

    シンプルでスタイリッシュなLightbox風のjQueryプラグイン「Featherlight」

    シンプルでスタイリッシュなデザインが特徴的なLightbox風のjQu…

  6. Bootstrap Dropdown Hover

コメント

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

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

最近の記事

  1. ベーコンエッグ&厚切りバタートースト
  2. 有栖川公園
  3. 広尾のスタバ
  4. マーガレットハウエルとミズノのコラボシューズ
  5. フレンチトーストや自家製ソーセージ

アーカイブ

PAGE TOP