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. no-image

    JavaScript

    レスポンシブ対応の軽量・コンパクトでシンプルなモーダルボックス「Modelo」

    Modeloは軽量・コンパクトなモーダルボックスを実装できるjQuer…

  2. Parallaxor

    JavaScript

    美しいパララックス効果を最小限のコードで実装できるjQueryプラグイン「Parallaxor」

    Parallaxorは最小限のミニマルなコードで美しいパララックス効果…

  3. no-image

    JavaScript

    HTML要素を回転させれる「jquery-ui-rotatable」

    jquery-ui-rotatableはHTML要素を回転させれるjQ…

  4. pull-to-reload

    JavaScript

    下へ引いてページをリフレッシュ(リロード)できる「pull-to-reload」

    pull-to-reloadは、Webページ内で下へ引くだけでページを…

  5. Art Text Light jQuery plugin

    JavaScript

    テキストに光が移動するエフェクトを与えることができる「Art Text Light jQuery p…

    指定したテキストに光が移動するエフェクトを与えることができるjQuer…

  6. ScrollBooster

    JavaScript

    ドラッグしながらスクロールするライブラリ「ScrollBooster」

    ScrollBoosterはドラッグしながらスクロールする機能を実装で…

最近の記事

  1. オリジナルチキン6ピース
  2. 200-DGCAM019
  3. ハクバ GW-PRO RED フォトグローブプロ PL
  4. Soundcore Liberty Air 2

アーカイブ

PAGE TOP