HCaptions

JavaScript

ホバー時に色々なエフェクトでキャプションをオーバーレイ表示できるjQueryプラグイン「HCaptions」

指定した要素をホバーすると色々なエフェクトでキャプションをオーバーレイ表示させることができるjQueryプラグイン「HCaptions」。フェードや上下左右からのスライドといったエフェクトがあります。応用次第でブログからWebサービスまで色々なところで活用できそうですね。

[ads_center]

使い方

使い方もとてもシンプルです。

$(window).load(function(){
    $('.hcaption').hcaptions();
});

マークアップは以下のような感じ。画像とホバー時のキャプションを記述していきます。

<a href="#" data-target="#myToggle" class="hcaption"><img src="画像パス"></a>
<div id="myToggle" class="hide">
    <h5>サンプルテキスト</h5>
    <p>サンプルテキスト...</p>
</div>

オプションではエフェクトやスピードを指定したりすることができます。以下は左からのスライドエフェクト。

$(selector).hcaptions({
    effect: "slide",
    direction: "left"
});

他にもたくさんのオプションがあるので詳しくは公式サイトで確認することができます。

お洒落なホバーエフェクトでキャプションを表示させたい時には覚えておきたいプラグインですね。

関連記事

  1. gridstack.js

    JavaScript

    ウィジェットレイアウトを作成できるjQueryプラグイン「gridstack.js」

    gridstack.jsはドラッグ&ドロップでウィジェットレイアウトを…

  2. Tiny slider
  3. SVG 3D Tag Cloud jQuery Plugin
  4. JavaScript

    レスポンシブに対応したビフォーアフター画像を実装できる「before-after.js」

    before-after.jsはシンプルでレスポンシブに対応したビフォ…

  5. jBox

    JavaScript

    ツールチップやモーダルウィンドウなどを実装できるjQueryプラグイン「jBox」

    jBoxはカスタマイズ性に優れたツールチップ、モーダルウィンドウ、通知…

  6. ViewBox

    JavaScript

    レスポンシブに対応したLightbox風のイメージギャラリー「ViewBox」

    ViewBoxはレスポンシブに対応したLightbox風のイメージギャ…

コメント

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

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

最近の記事

  1. cheero USB-C PD Charger 60W
  2. DY-S01
  3. OWL-QI10W04
  4. BQ-CC87L

アーカイブ

PAGE TOP