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

    JavaScript

    多彩なコンテンツ表示やカスタマイズ性を有する「LC Lightbox」

    LC Lightboxは画像や動画など多彩なコンテンツ表示ができたり高…

  2. t-scroll

    JavaScript

    アニメーションとともにアイテムが一つずつ現れる「t-scroll」

    t-scrollはアニメーションとともにアイテムを一つずつ表示させるこ…

  3. JavaScript

    スライドアニメーションが素敵なjQueryスライダー「Slideshow with jmpress.…

    とても素敵なスライドアニメーションを実装することができるjQueryス…

  4. scrollMonitor

    JavaScript

    要素が表示領域に入ったり出たりするとイベントを受け取れる「scrollMonitor」

    scrollMonitorは、要素が表示領域(ビューポート)に入ったり…

  5. Progressively

    JavaScript

    画像を徐々に読み込んでくれるJSライブラリ「Progressively」

    Progressivelyは画像を徐々に読み込ませることができるJSラ…

コメント

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

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

最近の記事

  1. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ
  2. カメラマングローブ Grip Hot Shot III
  3. 包(つつむ)巾着ポーチ
  4. KMC-80BK

Instagram始めました

Facebookページ

PAGE TOP