Relocator

JavaScript

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

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

[ads_center]

Relocatorの使い方

Relocator

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

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

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

Relocator

関連記事

  1. jfMagnify
  2. Yet Another Ripple Plugin
  3. no-image

    JavaScript

    シンプルで軽量なスクロールアニメーション実装「animateMePlz」

    animateMePlzはシンプルで軽量なスクロールアニメーションを実…

  4. Holmes

    JavaScript

    ページ内で特定のテキストを高速に検索してくれるライブラリ「Holmes」

    Holmesは、ページ内部を簡単にかつ高速に検索してくれるライブラリで…

  5. no-image

    JavaScript

    2枚の画像の違いを比較できるjQueryプラグイン「baSlider」

    baSliderはビフォー・アフターのような2枚の画像の違いを比較でき…

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP