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

    マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイン「jQuery Zoom」

    マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイ…

  2. Quill

    JavaScript

    高機能なWYSIWYGエディタを実装できる「Quill」

    Quillは豊富なAPIとカスタマイズ性に優れた高機能なWYSIWYG…

  3. no-image

    JavaScript

    多彩なパラメーターでモバイルフレンドリーなjQuery Lightboxプラグイン「frydBox」…

    frydBoxは、多彩なパラメーターでカスタマイズ性の高いモバイルフレ…

  4. BetterToggle

    JavaScript

    要素を拡大しながら表示させたり非表示にしたりできるjQueryプラグイン「BetterToggle」…

    面白いjQueryプラグインがあったのでご紹介します。指定した要素を拡…

  5. Kontext

    JavaScript

    iOSの画面切り替えのようなスライドができるJavaScript「Kontext」

    KontextというJavaScriptを使えばiOSの画面切り替えの…

  6. 10のjQueryスニペット

    JavaScript

    Webデザイナーが知っておくべき10のjQueryスニペット

    すべてのWebデザイナーが知っておくべき10のjQueryスニペットが…

コメント

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

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

最近の記事

  1. LAOWA 10-18mm F4.5-5.6 FE Zoom
  2. M3IETW BLACK
  3. V60珈琲王2 コーヒーメーカー
  4. Anker PowerCore Lite 20000
  5. ネクスタイム

Instagram始めました

Facebookページ

アーカイブ

PAGE TOP