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. JavaScript

    テキストを中央に向かうにつれて大きくしたりできるjQueryプラグイン「jqIsoText」

    結構おもしろかったのでメモしときます。テキストに簡単なエフェクトをかけ…

  2. parallax-background.js
  3. FilmRoll

    JavaScript

    中央に来た項目に焦点を当てるカルーセルを実装できるjQueryプラグイン「FilmRoll」

    FilmRollというjQueryプラグインを使えば中央に来た項目に焦…

  4. Zooming

    JavaScript

    クールな画像ズーム機能を実装できる「Zooming」

    Zoomingはクールでかっこいい画像ズーム機能を実装することができる…

  5. Pogo Slider

    JavaScript

    豊富なスライドアニメーションが揃っているjQueryプラグイン「Pogo Slider」

    Pogo Sliderは豊富なスライドアニメーションが揃っているjQu…

  6. jQuery plugin Watermark

コメント

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

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

最近の記事

  1. Soundcore Liberty Neo(第2世代)
  2. EH-NA0B
  3. KPS-88
  4. Happy Plugs AIR1
  5. cheero Stream 10000mAh

アーカイブ

PAGE TOP