Relocator

JavaScript

画像にマウスオーバーでタイトルがスライド表示するギャラリーを実装できるjQueryプラグイン「Relocator」

RelocatorというjQueryプラグインを使えば、画像にマウスオーバーした時にタイトルをスライド表示させるギャラリーを実装することができます。実際のデモではマウスオーバーすると下から上に向かってタイトルがスライドしてきます。画像にちょっとしたアニメーションを付け加えたギャラリーを作る際に役立ちそうですね。

[ads_center]

Relocatorの使い方

Relocator

こんな感じでマウスオーバーすると画像上にタイトルが表示されます。

$(document).ready(function(){
    $('#relocator').relocate({
        title: true,
        highlight: true,
        direction: "top",
        speed: 250,
    });
});

画像はリサイズされるので、サイズを合わせて整列させたレイアウトのイメージギャラリーを作ることも可能です。プラグイン自体が軽量なところも嬉しいですね。

Relocator

WordPressテーマ「Ignite」レスポンシブ対応のクリーン&エレガントなフリーのWordPressテーマ「Ignite」前のページ

3Dエフェクトが凄い!スクロールで傾いてくるjQueryプラグイン「JQuery Tilted Page Scroll」次のページ

関連記事

  1. Viewer

    JavaScript

    画像の拡大や縮小、回転などができるイメージギャラリー「Viewer」

    Viewerは画像の拡大や縮小、回転、上下左右の切り替えといった機能を…

  2. Horizon Swiper

    JavaScript

    スワイプやスクロール対応の軽量なjQueryプラグイン「Horizon Swiper」

    Horizon Swiperはスワイプやブラウザスクロールに対応したj…

  3. Drooltip.js

    JavaScript

    拡張性の高い美しいツールチップを実装できる「Drooltip.js」

    Drooltip.jsは、美しくパワフルで拡張性の高いツールチップを実…

  4. Pongstagr.am

    JavaScript

    自分のインスタグラムの画像を表示できるjQueryプラグイン「Pongstagr.am」

    Pongstagr.amは自分のインスタグラムの画像をWebサイトに表…

  5. FakeLoader.js

    JavaScript

    フルスクリーンでカッコいいローディングアニメーション・FakeLoader.js

    FakeLoader.jsはフルスクリーンでカッコいいローディングアニ…

  6. Multipicker

    JavaScript

    要素を選択するときに直感的な操作を実現する「Multipicker」

    Multipickerは、日付や曜日、番号、その他さまざまな要素を選択…

最近の記事

  1. ダミアン・ハースト 桜
  2. パッキングエリア
  3. あらびきソーセージパイ
  4. REACH フロス
PAGE TOP